JSFiddle - React, Tailwind, and code Playground

by Norlihazmey Ghazali

HTML

<table>
    <tr>
        <td class="text-center">//first input
            <input name="checkbox[]" type="checkbox" value="<?php echo $product['id'];?>" id="<?php echo $checkboxid; ?>" class="myCheckBox">
            <br/>
            <div class="<?php echo $checkboxid; ?>" style="display:none">
                <input name="chile" type="checkbox" value="">
                <br/>
                <input name="miami" type="checkbox" value="">
            </div>
        </td>
    </tr>    
</table>

JavaScript

// here we don't know how many need to loop
// example just 10
var length = 10; 
// here we create 10 rows dyanamically
for(var i = 0; i < 10; i++) {
	var clone = $('table tr:first').clone();
    $('table').append(clone);
}

// but here we only register to all myCheckBox class
// no repeatation code
$(document).on('change', '.myCheckBox', function () {
  if ( this.checked ) $(this).nextAll('div').show();
  else  $(this).nextAll('div').hide();
});