JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title> Add / Remove Records</title>

<table border="2" style="background-color: lightblue;">
  <thead>
    <h1 font style="color:blue">Add / Remove Records</h1>
  </thead>
  <thead>
    <tr>
      <th>Approval_No:</th>
      <td>
        <input type="text" value="" />
        <br/>
      </td>
    </tr>
    <tr>
      <th>No. of Entries:</th>
      <td>
        <input type="text" name="mytext[]" id="mytext1">
        <br/>
      </td>
      <br/>

    </tr>
    <tr>
      <td>
        <button class="add_field_button">Add More Fields</button>
      </td>
      <td>
        <button class="submit_button">Submit</button>
      </td>
    </tr>
  </thead>
</table>
<div class="input_fields_wrap">
</div>

CSS

div {
  padding: 8px;
}

JavaScript

$(document).ready(function() {
  var max_fields = 20; /*maximum input boxes allowed*/
  var wrapper = $(".input_fields_wrap"); /*Fields wrapper*/
  var add_button = $(".add_field_button"); /*Add button ID*/
  var sb = $(".submit_button");

  var x = 1; /*initlal text box count*/
  $(add_button).click(function(e) { /*on add input button click*/
    e.preventDefault();
    if (x < max_fields) { /*max input box allowed*/
      x++;
      var a = parseInt(document.getElementById("mytext1").value);
      var b = document.getElementById("wrapper");

	  /**Group the textboxes..**/
	  var htmlElements = [];
	  htmlElements.push('<div id="group_' + x + '">');
      htmlElements.push('<div style="clear:both"></div>');
      
      for (i = 0; i < a; i++) {
        var input = document.createElement("input");
        htmlElements.push('<input type="text" name="mytext[]" class="more-fields" id="mytext_' + i + '"/>');
        /*add input box*/
      }
      htmlElements.push('<a href="javascript:void(0)" class="remove_field" data-group="group_' + x + '">Remove</a>');
      htmlElements.push('<div style="clear:both"></div>');
	  htmlElements.push('</div>'); /**End the textbox grouping..**/
	  $(wrapper).append(htmlElements.join("")); /**End the textbox grouping..**/
    }
  });
  $(wrapper).on("click", ".remove_field", function(e) { /*user click on  remove text*/
    e.preventDefault();
    var group_id = $(this).data("group");
    $("#" + group_id).remove();
    x--;
  });
  $(sb).click(function(e) {
  	var data = {};
  	$(".more-fields").each(function(){
			data[(this.attr("id"))] = $(this).val();
   	});
    
    //You now have the data as json.. (data)
    
    var message = document.getElementById("mytext1").value;
    //dm.innerHTML = message;
  });
});