How can I add clone counter id in javascript

Question

I don't know where to put the counter; The next cloned id must be gender_1

Example:

<select id="gender">

Next is:
`<select id="gender_1">`

then:
`<select id="gender_2">`

https://jsfiddle.net/f7hjh1gf/6/

Please go read How to Ask. Relevant code belongs directly into your question, and not just on external sites only. — C3roe
– C3roe, Commented Jul 17, 2017 at 10:24

LogicalDesk · Accepted Answer · 2017-07-17 10:33:58Z

2

Try this, before append to the element you need to replace the cloned selected element id using find() function and update the id incremented using c++

Updated jsfiddle

$(document).ready(function(){
var c=1;
    $(document).on('click', '#mode', function(){
        $("#notok").clone(true).find('select').attr('id','gender_'+(c++) ).closest('.ok').appendTo("#clones");
    });
});

edited Jul 17, 2017 at 10:33

LogicalDesk

1,2974 gold badges20 silver badges52 bronze badges

answered Jul 17, 2017 at 10:28

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

prasanth Over a year ago

I think op was missing with jquery tag..he was full coded with jquery function.

LogicalDesk Over a year ago

@J.A.Manato, you have also not marked the answer in your previous post, you should mark answer or upvote if any of the post or reply helps you.

Dij · Accepted Answer · 2017-07-17 10:28:55Z

Everytime you add a clone get the number of clones already present and increment it by one before adding it to "gender_", you can use $("#clones div").length to get number of clones currently present.

$(document).ready(function(){
    $(document).on('click', '#mode', function(){
        $("#notok").clone(true).attr('id', "gender_"+($("#clones div").length + 1)).appendTo("#clones");
    });
});

<div class="container">

<div class="ok" id="notok">
	<select id="gender">
    	<option value="Male">Male</option>
        <option value="Female">Female</option>
    </select>

    
</div>

<div id=clones></div>

<button id="mode">Clone</button>


  

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>
  
</div>
  </div>
  
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Collectives™ on Stack Overflow

How can I add clone counter id in javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related