JSFiddle - React, Tailwind, and code Playground

HTML

<form name="form_reservations" method="post" action="add.php">
	  
	  <span class="form-style-9">
			<ul class="personal-details">
	  
					<label for="roomid">RoomID</label>
					<input name="roomid[]" type="text" class="stretchnights" id="roomid"  readonly="readonly" value="1">
					
					<label for="chkin">Check IN</label>
					<input class="stretchdate" size="15" width="15"  id="pick_date" type="date"  name="chkin[]"  onchange="cal()" required/>
					
					<label for="chkout">Check Out</label>
					<input class="stretchdate"  id="drop_date" type="date" name="chkout[]"  onchange="cal()" required/>
					
					<label for="nights">Nights    
					<input class="stretchnights" type="text"   id="numdays2"  name="nights[]" readonly /></label>
					
		   </ul>
			<button type="button" class="add-row">+ New Client</button>
		   
		  </span>
	</form>

JavaScript

function GetDays(){
					var dropdt = new Date(document.getElementById("drop_date").value);
					var pickdt = new Date(document.getElementById("pick_date").value);
					return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
			}

			function cal(){
			if(document.getElementById("drop_date")){
				document.getElementById("numdays2").value=GetDays();
			}  
		}
    $(document).ready(function(){
	  var genroomid = 2;    
	  $( ".add-row" ).click(function(){
		  var $clone = $( "ul.personal-details" ).first().clone();
		  var $input = $clone.find('#roomid');
		  $input.val(genroomid).attr('genroomid' , +genroomid)  
		  $clone.append( "<button type='button' class='remove-row'>-</button>" );
		  $clone.insertBefore( ".add-row" );
		  genroomid++; // increase id by 1
	  });
	  
	  
	  $( ".form-style-9" ).on("click", ".remove-row", function(){
		  $(this).parent().remove();
		  genroomid--;
	  });
	  });