JSFiddle - React, Tailwind, and code Playground

by itamer

HTML

<form method="POST" id='frmFixed'>
  <div id="list" data-idx=3>
    <!-- get data-idx from number of common items in database -->
    <div id='items1' class='container-2'>
      <div class='box-1'>
        <input type='checkbox' name='cb[1]' id='cb1' data-idx='1'>
      </div>
      <div class='box-2'>
        <label for='job1'>Job#: </label><input type='number' name='jobNumber[1]' id='job1' min='1' max='99' data-idx='1'>
      </div>
      <div class='box-3'>
        <label for='part1'>Part 1</label> <input name='part[1]' type='hidden' value=''>
      </div>
      <div class='box-4'>
        <label for='Qty1'>Qty: </label><input type='number' name='Qty[1]' id='Qty1' min='1' data-idx='1'>
      </div>
      <div class='box-5'>
        <label for='Comment{$i}'>Comment: </label><input type='text' name='Comment[1]' id='Comment1' data-idx='1'>
      </div>
    </div>



    <div id='items2' class='container-2'>
      <div class='box-1'>
        <input type='checkbox' name='cb[2]' id='cb2' data-idx='2'>
      </div>
      <div class='box-2'>
        <label for='job2'>Job#: </label><input type='number' name='jobNumber[2]' id='job2' min='1' max='99' data-idx='2'>
      </div>
      <div class='box-3'>
        <label for='part2'>Part 2</label> <input name='part[2]' type='hidden' value=''>
      </div>
      <div class='box-4'>
        <label for='Qty2'>Qty: </label><input type='number' name='Qty[2]' id='Qty2' min='1' data-idx='2'>
      </div>
      <div class='box-5'>
        <label for='Comment2'>Comment: </label><input type='text' name='Comment[2]' id='Comment2' data-idx='2'>
      </div>
    </div>


    <div id='items3' class='container-2'>
      <div class='box-1'>
        <input type='checkbox' name='cb[3]' id='cb3' data-idx='3'>
      </div>
      <div class='box-2'>
        <label for='job3'>Job#: </label><input type='number' name='jobNumber[3]' id='job3' min='1' max='99' data-idx='3'>
      </div>
      <div class='box-3'>
        <label for='part3'>Part...

CSS

.container-2{
    display:flex;
}
.container-1 div{
    border:1px solid #ccc;
    padding:1em;
    font-size: 1em
  
}
.container-2 div{
    border:1px solid #ccc;
    padding:1em;
    font-size: 1em;
  
}
.box-1{
    flex:.1;
  
}  
.box-2{
    flex:.3;
}  
.box-3{
    flex:.6;
}  
.box-4{
    flex:.3;
}  
.box-5{
    flex:1;
}  
.box-6{
    flex:.8;
} 
.box-7{
    flex:.2;
}

JavaScript

// add new line
var frm = document.getElementById('frmFixed');
var itemList = document.getElementById('list');


// Form submit event
frm.addEventListener('submit', addItem);
// Delete event
itemList.addEventListener('click', removeItem);

// Add item
function addItem(e) {
  e.preventDefault();


	itemList.dataset.idx++;
  var idx = itemList.dataset.idx;
  

  var itemsList = document.getElementById('items' + idx);


  // Create new div for row
  var rowDiv = document.createElement("div");
  rowDiv.id = "items" + idx;
  rowDiv.className = "container-2";
  // add the new div into the DOM  
  itemList.appendChild(rowDiv);



  // Create new <div> (for check box)
  var newDiv = document.createElement("div");
  //Create <class= 'box-1'>
  newDiv.className = "box-1";

  //Create checkbox
  var checkbox = document.createElement('input');
  checkbox.type = "checkbox";
  checkbox.checked = "true";
  checkbox.name = "cb[" + idx + "]";
  checkbox.id = "cb" + idx;
  checkbox.dataset.idx = idx;
  // Add check box to <div>
  newDiv.appendChild((checkbox));

  // add the newly created element and its content into div created (rowDiv) in the DOM
  document.getElementById("items" + idx).appendChild(newDiv);


  // Create new <div> (for Job Number)  
  var newDiv = document.createElement("div");
  //Create <class= 'box-2'>
  newDiv.className = "box-2";

  //Create Text (same as what is in main table) 
  var text = document.createTextNode('Job#');
  text.style = 'font-size: 20pt';
  // Add text to <div>
  newDiv.appendChild((text));

  //Create input for Job#     
  var input = document.createElement('input');
  input.type = "number";
  input.name = "jobNumber[" + idx + "]";
  input.id = "job" + idx;
  input.min = "1";
  input.max = "99";
  input.dataset.idx = idx;
  // Add Input to <div>
  newDiv.appendChild((input));

  // add the newly created element and its content into the DOM
  document.getElementById("items" + idx).appendChild(newDiv);


  // Create new <div> (for Part...