JSFiddle - React, Tailwind, and code Playground

by Mudit1996

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css">
<input type="button" class="btn btn-primary" value="Add new" id="add">
<div id="StudentList">
  <div id="student_0" data-value="0" class="student-row">
      <input type="hidden" name="Students[0].Id" value="0">
      <input type="text" name="Students[0].Name" value="Student0">
      <i class="fas fa-times delete"></i>
  </div>
</div>

JavaScript

$('#add').on("click", function(){
var nextIndex = 0;
if ($('.student-row').length > 0) {
                nextIndex = Math.max.apply(Math,
                        $('.student-row').map(function() {
                            return parseInt($(this).attr('data-value'));
                        }).toArray()) +
                    1;
            }
$('#StudentList').append(` <div id="student_0" data-value="`+nextIndex +`" 
																																	class="student-row">
      												<input type="hidden" name="Students[`+nextIndex+`].Id" value="0">     

      												<input type="text" name="Students[`+nextIndex+`].Name" value="Student`+nextIndex+`">
      												<i class="fas fa-times delete"></i>
 													 </div>`);
                });
$('#StudentList').on("click", ".delete", function(){
$(this).closest('.student-row').remove();
});