JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen-sprite.png"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen-sprite@2x.png"></script>
<table id="dataTable">
    <tr>
	  <th><input type="checkbox" id="selectall" value="selectAll"/></th>
      <th>Field-1</th>
      <th>Field-2</th>
      <th>Field-3</th>
      <th>Field-4</th>
      <th>Field-5</th>
	</tr>
      <tbody>
          <tr>
			<td><input type="checkbox"  class="check"></td>
			<td>
				<select name="input-1[]" class="chosen_select_L">
              		<option></option>
					<option>Option 1</option>
					<option>Option 2</option>
					<option>Option 3</option>
				</select>
            </td>
			<td><input name="input-2[]" type="text" class="chosen_text"></td>
			<td><input name="input-3[]" type="text" class="chosen_text"></td>
			<td><input name="input-4[]" type="text" class="chosen_text"></td>
            <td>
				<select name="input-5[]" class="chosen_select_M">
					<option></option>
                    <option>Option 1</option>
					<option>Option 2</option>
					<option>Option 3</option>
				</select>
			</td>
		  </tr>
      </tbody>
</table>
<p>
<input type="button" value="Add Field" onClick="addRow('dataTable')" /> 
<input type="button" value="Remove Field" onClick="deleteRow('dataTable')"  /> 
</p>
<p>(All acions apply only to entries with check marked check boxes only.)</p>

CSS

.chosen_text{
border-radius: 3px;
border: 1px solid #ADACAC;
background-color: #EDEBEB;
width:auto;
max-width:80px;
}

JavaScript

$(".chosen_select_L").chosen({
    disable_search_threshold: 10,
    no_results_text: "Oops, nothing found!"
  });
$(".chosen_select_M").chosen({
    disable_search_threshold: 10,
    no_results_text: "Oops, nothing found!"
  });

$(document).ready(function() {
    $('#selectall').click(function(event) {
        if(this.checked) { 
            $('.check').each(function() { 
                this.checked = true; 
            });
        }else{
            $('.check').each(function() { 
                this.checked = false; 
            });        
        }
    });
});

function addRow(dataTable) {
	var table = document.getElementById(dataTable);
	var rowCount = table.rows.length;
	if(rowCount < 11){
		var row = table.insertRow(rowCount);
		var colCount = table.rows[1].cells.length;
		for(var i=0; i<colCount; i++) {
			var newcell = row.insertCell(i);
			newcell.innerHTML = table.rows[1].cells[i].innerHTML;
		}
	}else{
		 alert("Maximum fields is 10.");
			   
	}
}

function deleteRow(dataTable) {
	var table = document.getElementById(dataTable);
	var rowCount = table.rows.length;
	for(var i=2; i<rowCount; i++) {
		var row = table.rows[i];
		var chkbox = row.cells[0].childNodes[0];
		if(null != chkbox && true == chkbox.checked) {
			if(rowCount <= 1) {
				alert("Cannot Remove all fields.");
				break;
			}
			table.deleteRow(i);
			rowCount--;
			i--;
		}
	}
}