jQuery UI datepicker inside multiple dynamic modal forms

$(document).ready(function(){
        $("#tanggal").datepicker({
        })
        })

<?php  
  $sql = mysql_query("SELECT * FROM paket ORDER BY id_pkt DESC");
  while($row = mysql_fetch_array($sql)){
       echo'
<div class="container">
<div class="wedding">
<div class="col-sm-3">

        <div class="hover-cap-3col">

        <h4>'.$row['jns_lay'].'</h4>
        <h6>'.$row['nm_pkt'].'</h6>
        <p>'.$row['detail'].'</p>
        <p>'.$row['hrg'].'</p>
        
        <a class="btn btn-default" data-toggle="modal" href="#'.$row['id_pkt'].'"><span data-toggle="modal" data-target="#'.$row['id_pkt'].'"></span>BOOK NOW <i class="glyphicon glyphicon-ok"></i></a><br><br>
                </div>
    </div>
    </div>
    </div>
    </div>
  <br><br>';
}
  ?>




<?php  
  $sql = mysql_query("SELECT * FROM paket ORDER BY id_pkt DESC");
  while($row = mysql_fetch_array($sql)){
       echo'
<div id="'.$row['id_pkt'].'" class="modal fade" role="dialog">
  <div class="modal-dialog" style="width: 50%;">

        <form method="POST" action="pesanan.php?act=add&amp;id_pktt='.$row['id_pkt'].'">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title text-center">PESAN JASA KAMI</h4>
      </div>
    <div class="modal-body">
    <div class="form-group">
        <label for="jns_lay">Jenis Layanan</label>
        <input type="text" id="jns_lay" name="jns_lay" class="form-control" value="'.$row['jns_lay'].'" readonly />
    </div>
    
     <div class="form-group">
        <label for="nm_pkt">Paket</label>
        <input type="text" id="nm_pkt" name="nm_pkt" class="form-control" value="'.$row['nm_pkt'].'" readonly />
    </div>
    
     <div class="form-group">
        <label for="hrg">Harga</label>
        <input type="text" id="hrg" name="hrg" class="form-control" value="'.$row['hrg'].'" readonly />
    </div>
      
        <div class="form-group">
        <label for="nama">Nama</label>
        <input type="text" id="nm" name="nm" class="form-control" placeholder="Masukkan nama" />
    </div>
     <div class="form-group">
              <label for="email">Email</label>
              <input type="email" id="email" class="form-control" placeholder="Masukkan Email" name="email" required="required" />
              </div>

              <div class="form-group">
              <label for="telp">No. Telepon</label>
              <input type="tel" id="telp" class="form-control" placeholder="Masukkan Telepon" maxlength="14" name="telp" required="required" />
            </div>

            <div class="form-group">
              <label for="tgl">Tanggal</label>
              <input type="text" id="tanggal" class="form-control" placeholder="mm/dd/yyyy" name="tanggal" required="required" />
              </div>
           
            <div class="form-group">
            <label for="alamat">Alamat</label>
            <textarea class="form-control" rows="10" placeholder="Masukkan Alamat Acara" name="almt_a" required="required"></textarea> 
            </div>

            <div class="form-group">
            <input type="hidden" class="form-control" rows="10" placeholder="Masukkan Status" name="stts" value="Belum Terlaksana" />
            </div>

  <div class="text-center">
    <button type="submit" class="btn btn-primary btn-lg">Pesan</button>
  </div>
      </div>
    </div>
    </div>
    </div>
    </form>';
  }
    ?>