JSFiddle - React, Tailwind, and code Playground

HTML

<form id='students' method='post' name='students' action='index.php'>

<table border="1" cellspacing="0">
  <tr>
    <th><input class='check_all' type='checkbox' onclick="select_all()"/></th>
    <th>S. No</th>
    <th>First Name</th>  
  </tr>
  <tr>
    <td><input type='checkbox' class='case'/></td>
    <td><span id='snum'>1.</span></td>
    <td>  
    <div class="select-editable">
      <select onchange="this.nextElementSibling.value=this.value" name="mytext" id="mytext">
        <option value=""></option>
        <option value="115x175 mm">115x175 mm</option>
        <option value="120x160 mm">120x160 mm</option>
        <option value="120x287 mm">120x287 mm</option>
      </select>
      <input type="text" name="input" id="input1" value="" />
      </div>
  </td>   
  </tr>
</table>

<button type="button" class='delete'>- Delete</button>
<button type="button" class='addmore'>+ Add More</button>
<p>
<input type='submit' name='submit' value='submit' class='but'/></p>
</form>

CSS

.select-editable {
   position: relative;
   background-color: white;
   border: solid grey 1px;
   width: 350px;
   height: 18px;
 }
 
 .select-editable select {
   position: absolute;
   top: 0px;
   left: 0px;
   font-size: 14px;
   border: none;
   width: 350px;
   margin: 0;
 }
 
 .select-editable input {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 330px;
   padding: 1px;
   font-size: 12px;
   border: none;
 }
 
 .select-editable select:focus,
 .select-editable input:focus {
   outline: none;
 }

JavaScript

$(document).ready(function() {
 var wrapper = $(".select-editable"); //Fields wrapper


$(".delete").on('click', function() {
	$('.case:checkbox:checked').parents("tr").remove();
    $('.check_all').prop("checked", false); 
	check();
});

var i=1;
$(".addmore").on('click',function(){
	count=$('table tr').length;
    var data="<tr><td><input type='checkbox' class='case'/></td><td><span id='snum"+i+"'>"+count+".</span></td>";
    data +="<td><div class='select-editable'><select onchange='this.nextElementSibling.value=this.value' name='mytext' id='mytext'><option value=''></option><option value='115x175 mm'>115x175 mm</option></select><input type='text' name='input' id='input" + (i+1) + "' value='' /></div></td></tr>";
	$('table').append(data);
	i++;
});

function select_all() {
	$('input[class=case]:checkbox').each(function(){ 
		if($('input[class=check_all]:checkbox:checked').length == 0){ 
			$(this).prop("checked", false); 
		} else {
			$(this).prop("checked", true); 
		} 
	});
}

function check(){
	obj=$('table tr').find('span');
	$.each( obj, function( key, value ) {
	id=value.id;
	$('#'+id).html(key+1);
	});
	};
  
   $("#students").on('keypress', 'input', function () {
      var cs = $(this).val().length+1;
      console.log( "total caracters:" + cs);
       $('#mytext').html('<option value="dummy01">dummy01</option><option value="dummy02">dummy02</option><option value="dummy03">dummy03</option>')
    });
  
});