checked checkboxes don't override hidden input with the same name

I have a table form whose rows can be generated dynamically. Each row has two text inputs and a checkbox.

And also a hidden input with the same name as checkbox.

<tr>
    <td><input type="text" name="names[]" class="form-control" required="required"></td>
    <td><input type="number" name="rates[]" class="form-control" required="required"></td>
    <td><input class="simple" type="checkbox" name='disallow_flag[]' value='1'/><input type="hidden" name="disallow_flag[]" value="0"></td>
    <td></td>
</tr>

$("#add_row").click(function(e) 
{
    e.preventDefault();
    html    =
            '<tr><td><input class="form-control" name="names[]" type="text" required="required"></td>\n\
            <td><input class="form-control" name="rates[]" type="number" required="required"></td>\n\
            <td><input class="simple" type="checkbox" name="disallow_flag[]" value="1"/><input type="hidden" name="disallow_flag[]" value="0"></td>\n\
            <td><a href="#" class="item_remove"><i class="fa fa-trash-o"></i></a></td></tr>';
    $(".menu_update_table").append(html);
});

After creating few rows and checking few checkboxes, I get the following output:

'names' => array(3)
 "dfdf"
 "sdfds"
 "dsfds"
'rates' => array(3)
 "1"
 "2"
 "3"
'disallow_flag' => array(4)
 "0"
 "1"
 "0"
 "0"

Note that disallow_flag array has four elements; since I have checked only one box out of three.

Expected output:

'disallow_flag' => array(3)
 "0"
 "1"
 "0"

How do I override hidden checkbox value if the corresponding checkbox is checked?