Creating Dynamic Ids - JQuery

Question

I am trying to clone a chunk of form element HTML and add it to the DOM. The adding and deleting is working fine, but the newly-added input elements in the chunks are not getting unique ids and names.

I am not able to create unique attribute values for "name" or "id".

For some reason my selector $('#myForm div:last').find('input').each(function(){...}

is not catching these.

Fiddle here

<script type="text/javascript">
var uniqueId = 1;
$(function() {
     $('.hyperlink').click(function() {

         var copy = $("#cosponsorsTemplate").clone(true).appendTo("#addCosponsorSection");
         var cosponsorDivId = 'cosponsors_' + uniqueId;
         copy.attr('id', cosponsorDivId );


         var deleteLink = $('<span class="t_formColumn5"><a class=\"icon delete\"></a></span><div class="clear"></div>');
         deleteLink.appendTo(copy);
         deleteLink.click(function(){
             copy.remove();
         });

         $('#myForm div:last').find('input').each(function(){
            $(this).attr('id', $(this).attr('id') + '_'+ uniqueId); 
            $(this).attr('name', $(this).attr('name') + '_'+ uniqueId); 



         });

         uniqueId++;  
     });
});
</script>

</head>
<body>
<div id="container">
    <h2>Sponsors Section</h2>
    <form action="" id="myForm">
     <div id="addCosponsorSection" style="width:900px; margin-left:12px;">
        <div id="cosponsors">
            <span class="t_formColumn1"><label for="sponsorclubname1">Sponsor club name 1:</label></span>
            <span class="t_formColumn2"><input  type="text" id="cosponsorcontact" name="cosponsorcontact"  placeholder="Name" title="Co-sponsor contact" /></span>
            <span class="t_formColumn3"><input  type="text" id="cosponsoremail"  name="cosponsoremail"     placeholder="Email" title="Co-sponsor email" /></span>
            <span class="t_formColumn4"><input  type="text" id="cosponsorphone"  name="cosponsorphone"     placeholder="Phone" title="Co-sponsor phone" /></span>
      </div>
       <div class="clear"></div>
        </div>

   <div class="clear"></div>
        <p><span class="hyperlink">+ cosponsor</span></p>   

    </form>
<!-- Start Template to Clone -->
<span style="display:none">
        <div id="cosponsorsTemplate">
            <span class="t_formColumn1"><label for="sponsorclubname1">Sponsor club name</label></span>
            <span class="t_formColumn2"><input  type="text" id="cosponsorcontact" name="cosponsorcontact"  placeholder="Name" title="Co-sponsor contact" /></span>
            <span class="t_formColumn3"><input  type="text" id="cosponsoremail"  name="cosponsoremail"     placeholder="Email" title="Co-sponsor email" /></span>
            <span class="t_formColumn4"><input  type="text" id="cosponsorphone"  name="cosponsorphone"     placeholder="Phone" title="Co-sponsor phone" /></span>
      </div>
</span>    
<!-- End Template to Clone -->
</body>
</html>

One might ask why you even need id values at all if they are dynamically generated? — jfriend00
– jfriend00, Commented Jan 3, 2014 at 18:44
You don't have to give them unique names. All possible values will be submitted to the action= script in order. If you're processing with PHP on the server, append [] to your input's name (name="cosponsoremail[]") and it will automatically be parsed into an ordered array. — Blazemonger
– Blazemonger, Commented Jan 3, 2014 at 18:45
my guess is div:last doesn't select what you think it does. See here: jsfiddle.net/pdHCc/4 though i'd suggest getting rid of the id's all together so that you don't need to make them unique, then leave the names alone. — user400654
– user400654, Commented Jan 3, 2014 at 18:46
When you copy your template your DOM has two elements with same ID and then using copy variable will not work. You should give your template a separate ID that you copy and create your first visible element from that template as well. I usually keep a hidden template and update its ID for next one and just copy that across and update hidden template everytime. — Farrukh Subhani
– Farrukh Subhani, Commented Jan 3, 2014 at 18:46
see my sample here with above technique jsbin.com/utoyej/85/edit — Farrukh Subhani
– Farrukh Subhani, Commented Jan 3, 2014 at 18:48

Gary · Accepted Answer · 2014-01-03 18:53:22Z

1

Your selector $('#myForm div:last') is grabbing a <div class="clear"></div> why not just use the copy object that you already have to reference the new div?

Example - http://jsfiddle.net/pdHCc/6/

answered Jan 3, 2014 at 18:53

Gary

6646 silver badges10 bronze badges

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

Comments

arun15thmay · Accepted Answer · 2014-01-03 18:48:44Z

1

http://jsfiddle.net/pdHCc/5/

The selector being used was wrong

$('#myForm div:last') => $('#' + cosponsorDivId)

answered Jan 3, 2014 at 18:48

arun15thmay

1,0621 gold badge9 silver badges19 bronze badges

Collectives™ on Stack Overflow

Creating Dynamic Ids - JQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related