Question

I have a button each time it is clicked, a new select input will be added. But I want the id and name of the select changed as well.My codes was:

<section>
  <div class="container">
   <select id="myId_1" name="myName_1">
     <option value="1">1</option>
     <option value="2">2</option>
   </select>
  </div>
</section>
<button type="button" id="myBtn">add</button>

$(document).ready(function () {
    $('#myBtn').click(function(){
      var addEvent = $('.container').html();
      var addEventCell = $('<div class="container">'+addEvent+'</div>');
      $('section').append(addEventCell);
    });
  });

But my code just duplicates the id and name of select. I want it to change to myId_2, myName_2,myId_3,myName_3 and so on.

I am new to javascript. It could be easy to you guys. Thanks for help !

Answer 1

this is the link for JSFiddle working here. It may be useful for you

$(document).ready(function () {
    $('#myBtn').click(function(){
      var addEvent = $('.container').html();

      var selectid = $('section :last-child select').attr('id'); 
      var selectname = $('section :last-child select').attr('name'); 

      var tempId = parseInt(selectid.split('_')[1])+1; 
      var tempName = parseInt(selectname.split('_')[1])+1; 
      var addEventCell = $('<div class="container">'+addEvent+'</div>');

      var newId =  selectid.split('_')[0]+"_"+tempId; 
      var newName = selectname.split('_')[0]+"_"+tempName ;

      var select = $('select', addEventCell);
      select.attr('id', newId).attr('name', newName);      

      $('section').append(addEventCell);
    });
  });​