Extending Clone Table Rows functionality - changing row ID

Answer 1

You may try this js code.

Scenario:-I was having the scenario of making clone of table inside a div and also removing the clone on click of remove clone link.

    <script>
    var count=1;
    function makeClone()
    {
    var $clone = $(".cloneTable:first").clone(true);

    $clone.find(':text,:file').each(function() {
            $(this).attr('id',($(this).attr("id")+count));
            $(this).val(' ');
        });
         $clone.find("a").each(function() {
              $(this).val('').attr('id', function(_, id) {
                return count;
              });
            });
         $clone.find("span").each(function() {
             $(this).attr({
                id: $(this).attr("id") + count
         });
        });
             $clone.attr( 'id', function() { 

                  return this.id + count; });
      //for use of datepicker 
      $clone.find('.myDate').removeClass('hasDatepicker').datepicker();

    $clone.appendTo('#addCarrierDiv');
    $('#Test'+count).html('<strong>Test '+(parseInt(count)+parseInt(1))+'</strong>');

    count=count+1;
}
    </script>

Here i am updating my answer for providing the code to remove a clone.

$(document).ready(function(){

$('.removeClone').live('click',function() {

        var length=$('.cloneTable').length;
        if(length==1)
            {
            alert('There should be atleast one clone');
            return false;
            }


        var id = $(this).attr('id');
        var countVal=parseInt(id)+parseInt(1);
        $(this).closest('.cloneTable').remove();
         for(var removecount=parseInt(countVal);removecount<=length;removecount++)
            {
             $clone=jQuery("#maintable"+removecount);
             if(removecount==1)
                 {
                 $clone.find(':text,:file').each(function() {
                        var textId=$(this).attr("id");
                        var testVal=textId.replace(/[0-9]/g, '');
                        $(this).attr('id',testVal);

                    });

                 $clone.find("a").each(function() {
                        var textId=$(this).attr("id");
                        var testVal=textId.replace(/[0-9]/g, '');
                        $(this).attr('id',testVal+id);

                    });

                 $clone.find("span").each(function() {
                        var textId=$(this).attr("id");
                        var testVal=textId.replace(/[0-9]/g, '');
                        $(this).attr({
                         id: testVal
                     });
                         $(this).html('<strong>Test '+removecount+'</strong>');
                    });

                 $clone.attr( 'id', function() { 
                     var textId=$(this).attr("id");
                     var testVal=textId.replace(/[0-9]/g, '');
                      return (testVal);
                      });
                 id=parseInt(id)+parseInt(1);
            }  

             else
                 {
                $clone.find(':text,:file').each(function() {
                    var textId=$(this).attr("id");
                    var testVal=textId.replace(/[0-9]/g, '');
                    $(this).attr('id',testVal+id);

                });
                $clone.find("a").each(function() {
                    var textId=$(this).attr("id");
                    var testVal=textId.replace(/[0-9]/g, '');
                    $(this).attr('id',testVal+id);

                });

                $clone.find("span").each(function() {
                    var textId=$(this).attr("id");
                    var testVal=textId.replace(/[0-9]/g, '');

                    $(this).attr({
                     id: testVal+id
                 });
                     $(this).html('<strong>Test '+removecount+'</strong>');
                });

                 $clone.attr( 'id', function() { 
                     var textId=$(this).attr("id");
                     var testVal=textId.replace(/[0-9]/g, '');
                      return (testVal+id);
                      });
                 id=parseInt(id)+parseInt(1);
                 }
            } 
         count=parseInt(count)-parseInt(1);
    });
});

This work's fine for me.Hope this code may help you.

Answer 2

Maybe I'm missing something but this should be as easy as setting the ID attribute:

var $clone = $("#template").clone();
var index = $("table.reference tr:not(.template)").length;
$clone.attr("id", "emlRow_" + index);

---

UPDATES

var count = $("table.reference tr").length;

$("#Add").click(function() {
    count++;
    var $clone = $("#secondaryEmails tbody tr:first").clone();
    $clone.attr({
        id: "emlRow_" + count,
        name: "emlRow_" + count,
        style: "" // remove "display:none"
    });
    $clone.find("input,select").each(function(){
        $(this).attr({
            id: $(this).attr("id") + count,
            name: $(this).attr("name") + count
        });
    });
    $("#secondaryEmails tbody").append($clone);
});

working example: http://jsfiddle.net/hunter/EwQUW/35/