javascript - jQuery functions not working on cloned

I have a problem with j query function calculate date after clone, i need to auto calculate how many days after user select check in and check out date and put it in textbox , its working for first row but not working with cloned rows

DEMO

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
 <script type="text/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();
        }  
    }
    </script>
<script type="text/javascript">
$(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--;
  });
  });
  </script>
  </head>
  <body>
  <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>
</body>

Solution

There are lot of issues in the snippet you shared, you are trying to using ID in the original element and cloning it, this is a bad idea for your use case. What you can do is convert it to class, and pass the target element in cal(). by doing that you can find the element. And your label for nights is not closed properly

replace your exiting script block

<script type="text/javascript">
        function GetDays(target){
                var dropdt = new Date($(target).find(".drop_date").val());
                var pickdt = new Date($(target).find(".pick_date").val());
                return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
        }
        function cal(target){   
            console.log($(target).parent(), $(target).parent().find('numdays2'));
            $(target).parent().find('.numdays2').val(GetDays($(target).parent()));
        }  
    </script>

and replace your .personal-details html block with this

<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  size="15" width="15"  id="pick_date" class="pick_date" type="date"  name="chkin[]"  onchange="cal(this)" required/>
        <label for="chkout">Check Out</label>
        <input  id="drop_date" type="date" name="chkout[]"  class="drop_date" onchange="cal(this)" required/>
        <label for="nights">Nights  </label>  
        <input class="numdays2" type="text" id="numdays2" name="nights[]" readonly />

This should solve the problem