Clone in JQuery not working

Question

I have it working on one page- but when I extract the code it doesn't work.

I have minimized the code for your review:

<table class="lightlines">
<tr>
  <td valign="top">Title:</td>
  <td><input type="text" value="" name="titleText" id="titleText"> 
  <p id="cloneMe">
    <table class="lightlines">
    <tr>
      <td>P/N: </td>
      <td><input type="text" value="" name="pnText" id="pnText"></td>                             
      <td>Description: </td>
      <td><input type="text" value="" name="pnDescText" id="pnDescText"></td>
    </tr>
    </table>
  </p>
  <p id="theClones">
  </p>
 </td>
</tr>
<tr>
  <td colspan="6" align="right"><input type="button" name="addPNRow" id="addPNRow" value="add row" /><input type="button" name="saveTitleText" id="saveTitleText" value="save"  /></td>
</tr>
</table>
<script>
$(function(){
 var cloneCount = 0;
 $('#addPNRow').click(function(){
    var cl = $('#cloneMe').clone().attr({
  id: 'cloneMe_' + cloneCount
}).find('[id^="pnText"]').attr({
  value: '',
  id: 'pnText_' + cloneCount
}).end().find('[id^="pnDescText"]').attr({
  value: '',
  id: 'pnDescText_' + cloneCount
}).end().appendTo('#theClones');
    cloneCount++;
});
  });

</script>

and here's a fiddle: http://jsfiddle.net/Mh4f8/11/

Answer 1

whenever I need to clone a block of HTML, I make sure the html does not have any IDs in it at all.

if you're ok with removing "ids" from the html, then you can change the javascript to what I have below

the way I would build it

fiddle, I ripped out the table

html

<div class="lightlines">
    <fieldset>
        <label class="label-title"><span>Title:</span>
            <input type="text" value="" name="titleText"/>   
        </label>
    </fieldset>
    <fieldset class="clone-me">
        <label><span>P/N:</span>
            <input type="text" value="" name="pnText"/>                            
        </label>
        <label>
            <span>Description:</span>
            <input type="text" value="" name="pnDescText"/>  
        </label>
    </fieldset>
</div>
<div class="button-container">
    <input type="button" name="addPNRow" id="addPNRow" value="add row" />
    <input type="button" name="saveTitleText" id="saveTitleText" value="save"  />
</div>

css

div.lightlines .button-container{float:right;}
div.lightlines label {margin-left:2em;}
div.lightlines label.label-title {margin-left:0.5em;}

javascript

$(function(){
 $('#addPNRow').click(function(){
     var $cloneMe = $(".clone-me"),$cloned = $cloneMe.clone(); 

    $cloned.find("input").each(function(index,elem){
      $(this).val("");
    });
    $cloneMe.toggleClass("clone-me").parent().append($cloned);
  });
});

your fix

found the issue, the way you were using tables after cloning wasn't quite valid w3c spec. your updated fiddle

<table class="lightlines">
  <tr>
    <td>
      <fieldset class="clone-me">
        <label><span>P/N:</span>
            <input type="text" value="" name="pnText"/>                            
        </label>
        <label>
            <span>Description:</span>
            <input type="text" value="" name="pnDescText"/>  
        </label>
    </fieldset>
    </td>
  </tr>
  <tr>
    <td  align="right"><input type="button" name="addPNRow" id="addPNRow" value="add row" /><input type="button" name="saveTitleText" id="saveTitleText" value="save"  /></td>
  </tr>
</table>

<script>


$(function(){
     $('#addPNRow').click(function(){
         var $row = $("fieldset.clone-me").closest("tr"), $cloned = $row.clone();
         $cloned.find("input").each(function(index,elem){
            $(this).val("");
        }).end().find(".clone-me").toggleClass("clone-me");
         $(this).before($cloned);
     });

});
</script>