JSFiddle - React, Tailwind, and code Playground

by Joe

HTML

<select id="howmany4D">
        <option>5</option>
        <option>20</option>
        <option>30</option>
        <option>40</option>
        <option>50</option>
      </select>
      <table id="table4d">

      </table>
      <div class="buttons">
        <button>Kirim</button>
        <button>Hapus</button>
      </div>

JavaScript

checkAll4D = document.getElementById('checkAll4D');
    checkThis4D = document.getElementsByName('checkThis');
    howmany4D = document.getElementById('howmany4D');

howmany4D.addEventListener('change', function() {
  deleteRows();
howmany4D = document.getElementById('howmany4D');
 var table4d = document.getElementById('table4d');
  table4d.style.width = '100%';
   table4d.setAttribute('border', '1');
    for(var i = 0; i < howmany4D.value; i++) {

        var tr = document.createElement('tr');
        var td1 = document.createElement('td');

        var chkbox = document.createElement('input');
        chkbox.type = "checkbox";
        chkbox.id = "checkThis";
        chkbox.name = "checkThis";

        td1.appendChild(chkbox);
        tr.appendChild(td1)

        for (var inputNeeded = 0 ; inputNeeded< 5 ; inputNeeded++) {

          var td = document.createElement('td');
          var text = document.createElement('input');
          text.type = "text";
          text.disabled = "true";      
          td.appendChild(text);
          tr.appendChild(td)            
        }
        table4d.appendChild(tr);
       }
});

for(var i = 0; i < checkThis4D.length; i++) 
  checkThis4D[i].addEventListener('change', hearSome);

function hearSome() {
    var parentOf = this.parentNode.parentNode;
    var inputs = parentOf.querySelectorAll('input[type=text]');

    if(this.checked)
        for(var x = 0; x < inputs.length; x++) inputs[x].removeAttribute('disabled');
    else
        for(var x = 0; x < inputs.length; x++) inputs[x].setAttribute('disabled', true);
}

function deleteRows () {
  var tableHeaderRowCount = 1;
  var table = document.getElementById('table4d');
  var rowCount = table.rows.length;
  for (var i = tableHeaderRowCount; i < rowCount; i++) {
      table.deleteRow(tableHeaderRowCount);
  }
}