JSFiddle - React, Tailwind, and code Playground

by itamer

HTML

<body>

    <form method="POST" id='frmFixed'>
      <div id="list" data-idx=2>
        <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='job1'>Job#: </label><input type='number' name='jobNumber[2]' id='job1' min='1' max='99' data-idx=1>
          </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>
       <input type="submit" value="Add">
    </form>
  </body>

CSS

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

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;
  
  // 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.name = "name";
  checkbox.id = "id";
  checkbox.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").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 = "name";
  input.value = "value";
  input.id = "id";
  // Add Input to <div>
  newDiv.appendChild((input));

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


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



  //Create input for Description
  var input = document.createElement('input');
 ...