javascript - how to add jquery toggle between smarty loop or foreach items -

for jquery guru's out there, trying. trying add jquery toggle between smarty template { foreach item list } code works great works on first list item, not toggle when click on 2nd, 3rd etc items in list. suggestions?

jquery code

<script> $(function(){ $("#itm_add").each(function(){     $(this).click(function(e){         e.preventdefault();         $("#itm_add_box").parent("tr").empty();         href=$(this).attr("href");         $(this).closest("tr").next("tr").empty().append('<td colspan="6"><div  id="itm_add_box" data-href="'+href+'"> <input type="text" id="itm_serial" class="input" placeholder="serial  number..." /> &nbsp;  <input type="text" id="itm_qty" class="input"  placeholder="quantity..." /> &nbsp;  <button class="green" id="itm_submit">submit</button></div><td>');         $("#itm_add_box button").click(function(e){         e.preventdefault();         href2=$(this).parent("#itm_add_box").attr("data-href");         serial=$(this).parent().find("#itm_serial").val();             qty=$(this).parent().find("#itm_qty").val();             href2=href2+"&item_serial="+serial+"&item_quantity="+qty;             window.location=href2;         });     }); });  }); </script> 

smarty template:

<table> <tr> <td class="olohead" align="center" width="80">id</td>     <td class="olohead" align="center">type</td>     <td class="olohead" align="center">name</td>     <td class="olohead" align="center">no</td>     <td class="olohead" align="center">features</td>                         </tr>  {foreach from=$customer item=customer}  <td class="olotd4" nowrap  align="center">{$customer.id}</td> <td class="olotd4" nowrap align="center">{$customer.type}</td>     <td class="olotd4" nowrap >&nbsp;{$customer.name} </td>     <td class="olotd4" nowrap >&nbsp;{$customer.no} </td>     <td class="olotd4" nowrap align="center">  <a id="itm_add">add</a>  </td>                                </tr>  {/foreach} </table> 

again: works, toggle works on first listed item. suggestions?

the suggestion remove id loop , make class made in comments. in mind, tried clean js bit:

$(function() {     $(".itm_add").click(function(e) {         e.preventdefault();         $(this).parent("tr").empty();         $(this).closest("tr").next("tr").empty().append(gettemplate($(this).attr("href")));         $(this).find("button").click(function(e) {             e.preventdefault();             var href = $(this).parent("#itm_add_box").attr("data-href");             var serial = $(this).parent().find("#itm_serial").val();             var qty = $(this).parent().find("#itm_qty").val();             href += "&item_serial=" + serial + "&item_quantity=" + qty;             window.location = href;         });     }); });    function gettemplate(href) {     return '<td colspan="6">'                 + '<div id="itm_add_box" data-href="' + href + '" >'                     + '<input type="text" id="itm_serial" class="input" placeholder="serial number..." /> &nbsp;'                     + '<input type="text" id="itm_qty" class="input" placeholder="quantity..." /> &nbsp;'                     + '<button class="green" id="itm_submit">submit</button>'+                 +'</div>'           + '<td>'; } 

note code not tested, there bugs in there...

what changed:

• removed .eachas not required. jquery automatically add event handler on elements selector applies to.
• used $(this) inside handler, make code apply item has triggered event, in stead of matched items.
• moved html separate function, keep things bit more readable.
• made variables function scope in stead of global, adding varkeyword in front of declaration.

let me know if there bugs missed, or if needs further explanation.