Adding select/deselect all to dynamic tabular form

Question

I have a form which contains buttons to add and delete rows. My javascript function to check all checkboxes works for the first row, but once I add more rows to the form, the first row is still the only one that gets checked.

Any tips?

Here is my javascript function:

<code>
//checks all rows
function checkAll() {
var masterCheck = document.getElementById('masterCheck');
var on = false;
if(masterCheck.checked==true) {
    document.getElementById('checkbox').checked=true;
} else {
    document.getElementById('checkbox').checked=false;
}
}
</code>

And here is the form: http://crimsonroot.com/files/freelance/new.html

Any help is appreciated!

Answer 1

I found out what was wrong! @Mohammed your answer really helped. There were just one or two syntax errors that I found. In order to check and uncheck all of the boxes, I needed to add a boolean variable as an input to the function as follows:

//checks all rows
function checkAll(bool) {
    var masterCheck = document.getElementById('masterCheck');
    var allcheck = document.getElementsByClassName('checkbox');
    var on = false;
    for (var i = 0; i < allcheck.length; i++) {
        if (masterCheck.checked == true) {
            allcheck[i].checked = true;
        } else {
            allcheck[i].checked = false;
        }
    }

} 

For some reason, this was the final piece to the puzzle. Thanks for all of the help!