Cloning and assigning dynamic element IDs

Cloning and assigning dynamic element IDs

Hi Guys,

Well this is my first post, I have been using jQuery here and there for a few small enhancements, I have to say I really like it so far, but it seems I have run into a little snag. If you look at the code below it should make some sense, hopefully.
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>MiSland MX</title>
  6. <style>
  7. .ninja {
  8. visibility: hidden;
  9. background: green;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14.     <script src="jquery-2.1.0.js"></script>
  15.     <script>
  16. var c = 0;
  17.     $( document ).ready(function() {
  18. $(btnRemove).click(function(){
  19. $(this).closest('div').remove();
  20. console.log("remove row");
  21. });
  22. $(btnClone).click(function(){
  23. $(tmpClone).clone(true).appendTo(tmpList).attr('id','line'+(++c)).attr('class','').show();
  24. console.log("create new row");
  25. $('line'+c).contents().attr('id','line'+(c)).attr('id','id'+c); //issue
  26. console.log("child colored "+'line'+c+"");
  27. });
  28. $(document).ready(function() {
  29. console.log("page loaded");
  30. });
  31.     });
  32.  
  33.     </script>
  34. <button id=btnClone>New Line</button>
  35. <div id=tmpClone class="ninja">
  36. <button id=btnRemove>Remove</button>
  37. Name: <input id="rep_firstname" />
  38. Surname: <input id="rep_lastname" />
  39. Contact Number: <input id="rep_contactnumber" />
  40. Gender: <select id="rep_gender">
  41. <option>Male</option>
  42. <option>Female</option>
  43. <option>Unspecified</option>
  44. </select>
  45. Dev1: <select id="rep_Dev">
  46. <option>No</option>
  47. <option>Something Sensible</option>
  48. <option>Dev2Val</option>
  49. <option>Dev3Val</option>
  50. </select>
  51. </div>
  52. <div id=tmpList> </div>
  53. </body>
  54. </html>

Now as you can see the issue I have at the moment comes when I create a "New Line", it clones the line correctly and displays it with a "Remove" button, which works perfectly when clicked. What I want is when someone clicks the "New Line" button, not only to have the encapsulating DIV uniquely named, but also all the elements in it.

e.g:  rep_gender => line#_gender
or rep_firstname => line#_firstname

Is there a way to loop through all the elements in the parent element?

Regards