带有隐藏行的克隆表

Question

I have a repeating table with a hidden row and when clicking the a checkbox I have the row appearing, however when adding more than one table the same row always appears instead of the row that has just been cloned. I would appreciate any help with this.

My code looks like the following:

HTML:

<table class="repeatingTable">
    <tr>
        <td>
            <label for="name">Name</label>
        </td>
        <td>
            <input type="text" name="name" id="InputName" class="InputID_1" />
        </td>
        <td>
            <label for="req">Required</label>
        </td>
        <td>
            <input type="checkbox" name="req" id="CheckBox" class="ChexkBox_1" readonly="readonly" />
        </td>
    </tr>
    <tr id="HiddenFields" class="HiddenFields_1">
        <td>
            <label for="Box">Box Number</label>
        </td>
        <td>
            <input type="number" name="Box" id="InputBoxNo" class="InputBoxNo_1" readonly="readonly" />
        </td>
        <td>
            <label for="id">ID Number</label>
        </td>
        <td>
            <input type="number" name="id" id="inputNo" class="InputNo_1" />
        </td>
    </tr>
</table>
<div class="expensesBtns">
    <input id="repeatingBtn" type="button" value="Add Another" />
</div>

Javascript:

document.getElementById("HiddenFields").style.visibility = "hidden";

 $('.ChexkBox_1').click(function () {
    if (!$(this).is(':checked')) {
        document.getElementById("HiddenFields").style.visibility = "hidden";
    }
    else {
        document.getElementById("HiddenFields").style.visibility = "visible";
    }
})


 $('#repeatingBtn').click(function (e) {
    //$('.expensesSection').clone(false).find("*[id]").andSelf().each(function () {
    //    $(this).attr("id", $(this).attr("id") + "_cloned");
    //})
    e.preventDefault();
    var lastRepeatingGroup = $('.repeatingTable').last();
    var cloned = lastRepeatingGroup.clone(true);
    cloned.insertAfter(lastRepeatingGroup);
    cloned.find("input").val("");
    //resetAttributeNames(cloned);
});

I have a js fiddle here: jsfiddle

Any help is greatly appreciated.

Answer 1

Check your UPDATED FIDDLE .

Worked after some changes in ChexkBox_1 click event, you have to use $(this) instead of document.getElementById("HiddenFields") to deal with current checkbox clicked :

$('.ChexkBox_1').click(function () {
    if (!$(this).is(':checked')) {
        $(this).parents('table').find(".HiddenFields_1").css('visibility',"hidden");
    }
    else {
        $(this).parents('table').find(".HiddenFields_1").css('visibility',"visible");
    }
});

NOTE : when you clone the row you have to change id because element IDs should be unique within the entire document.