Jquery clone table row in html panels

Question

I have a panel and a table inside that panel. I am adding those panels dynamically and adding rows to table dynamically using jQuery. Cloning of table rows works just fine but as soon as i add another panel the cloning of table rows doesnt work on second table, please help.

Js code to add panel:

$('#addBtn').click(function () {

    var total = parseInt($("#click_count").val()) + 1;
    $("#click_count").val(total);

    var htmlcontent = $(".panel-body:last").html();


    var beforecontent = '<div class="panel panel-info po_panel">'
        + '<div class="panel-heading">'
        + '<h6 class="panel-title">'
        + '<a  data-toggle="collapse"  href="#po' + total + '">Add Panel</a>'
        + '</h6>'
        + '</div>'
        + '<div id="po' + total + '" class="panel-collapse collapse in">'
        + '<div class="panel-body">' + htmlcontent + '</div></div> </div>';

    $(beforecontent).insertAfter(".po_panel:last");
});

JS code to clone table row:

$(function() {
    $(".btn").click(function(){
        var clone = $(this).closest('tr').clone(true);
        $("td:first-child", clone).empty();
        $("td:first-child", clone).html('<a href="javascript:void(0);" class="remCF">Remove</a>');
        clone.insertAfter( $(this).closest('tr'));
    });
    $("table.table").on('click','.remCF',function(){
        $(this).parent().parent().remove();
    });
});

Answer 1

Try to use this.

$(function() {
    $("body").on('click', '.btn', function(){
        var clone = $(this).closest('tr').clone(true);
        $("td:first-child", clone).empty();
        $("td:first-child", clone).html('<a href="javascript:void(0);" class="remCF">Remove</a>');
        clone.insertAfter( $(this).closest('tr'));
    });
    $("table.table").on('click','.remCF',function(){
        $(this).parent().parent().remove();
    });
});

Note: you can change $("body") with container div which hold all the panels.