Extending Clone Table Rows functionality - changing row ID

I have this fiddle at: http://jsfiddle.net/radi8/EwQUW/33/

Notice that the initial table is defined is:

<table class="ref开发者_运维技巧erence" width="100%" border="1" align=left id="secondaryEmails">
<thead>
    <tr>
        <th width="30%">SelectRow</th>
        <th width="40%">Email</th>
        <th width="30%">Ship Type</th>
    </tr>
</thead>
<tbody>
    <tr id="template" style="display:none">
        <td align="center">
            <input type=radio id="index_" name = "index" value="0">
        </td>
        <td align="center">
            <input type="text" id="email_" name ="email_" value="" size=40>
        </td>
        <td align="center">
            <select style=width:150 id="shipType_" name="shipType_">
                <option value="0" "selected">Both</option>
                <option value="1">Over Road</option>          
                <option value="2">Over Rail</option>
            </select>
        </td>
    </tr>
    <tr>
        <td align="center">
            <input type=radio id="index_2" name = "index" value="2">
        </td>
        <td align="center">
            <input type="text" id="email_2" name ="email_2" value="eml@domain.com" size=40>
        </td>
        <td align="center">
            <select style=width:150 name="shipType_2" id="shipType_2">
                <option value="0" >Both</option>
                <option value="1" >Over Road</option>
                <option value="2" selected>Over Rail</option>
            </select>
        </td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <th align="center">
            <button id='Add'>Add Row</button>
        </th>
        <th>&nbsp;</th>
        <th align="center">
            <button id='update'>Update</button>
        </th>
    </tr>
</tfoot>

When I clone the first row, I need to change the ID of the new row to something like

<tr id="emlRow_1">

where the number is the new ID of the row.

Can someone guide me on how to do this?

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/

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.