JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<input type="checkbox" name="check1" id="check1">Check if Username is the same


<div class="input_fields_wrap">
    <button class="add_field_button btn btn-primary">Add More</button>
    <input type="submit" class="btn btn-danger" value="Create" onClick="return empty()"/> 
 <div>
<label>
        <span>How many:</span>
        <input type="text" name="howmany[]" id="howmany[]">
</label>
<br>
<label>
        <span>Template Id :</span>
        <input type="text" name="templateid1" id="templateid1" value="001">
</label>
<br>
<label>
        <span>UNC Path :</span>
        <input type="text" name="uncpath[]" id="uncpath[]">
</label>
<br>
<label>
        <span>Username :</span>
        <input type="text" class="original" name="username[]" id="username[]">
</label>
<br>
<label>
        <span>Password :</span>
        <input type="text" name="password[]" id="password[]">
</label>
<br>
<label>
        <span>Scan To :</span>
        <input type="text" name="scantoname[]" id="scantoname[]">
</label>
    <a href="#" class="remove_field btn btn-primary">Remove</a>
    
    </div>
</div>

JavaScript

$(document).ready(function() {
	
	Number.prototype.pad = function(size) {
      var s = String(this);
      while (s.length < (size || 0)) {s = "0" + s;}
      return s;
    }
	
	
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
   
    var x = 1; //initlal text box count
	var c = 9;
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
			c++;
            $(wrapper).append('<div><label><span>Template Id :</span><input type="text" name="templateid'+x+'" id="templateid'+x+'"></label><br><label><span>UNC Path :</span><input type="text" name="uncpath'+x+'" id="uncpath'+x+'"></label><br><label><span>Username :</span><input type="text" class="pass" name="username'+x+'" id="username'+x+'"></label><br><label><span>Password :</span><input type="text" name="password'+x+'" id="password'+x+'"></label><br><label><span>Name :</span><input type="text" name="scantoname'+x+'" id="scantoname'+x+'"></label><a href="#" class="remove_field btn btn-primary">Remove</a></div>'); //add input box
       
		
		<!--add input value to 'how many field-->
    $.each($('input[name="howmany[]"]'), function() {
    
    
        $(this).val(x);
    });
	
	

	
		<!--add input value to 'templateid field-->
	  $('input[name="templateid'+x+'"]').each(function() {
     $(this).val((x).pad(3,0));
}); 

	
		
		}
    });
   
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});


$('#check1, #addmore').click(function(){

    if (this.checked) {
   
         $('.pass').val($('.original').val());
    
	
    }
})