javascript - Having multiple datepicker and linking them all together -

i'm using https://github.com/eternicode/bootstrap-datepicker datepicker. have problem on how link multiple datepickers making them same. 1 header , 1 main page. if click datepicker on the header , change date should same in main page same goes when change date on main page header must change well. making them linked together. initialize , works 1 on header. on reload datepicker on header shows date today , date tomorrow. when change date arrival departure change date tomorrow. works on header doesn't work on mainpage, not show date today , date tomorrow when reload shows on header. when click date arrival on main page date departure not change still gets date on header. please help.

my code.

header

   <input type="text" name="datearrival" class="datepicker arrivaldate">    <input type="text" name="datedeparture"class="datepicker departuredate"> 

mainpage

   <input type="text" name="datearrival" class="datepicker arrivaldate">    <input type="text" name="datedeparture"class="datepicker departuredate"> 

---

$(document).ready(function() {      var nowdate = new date();     var today = new date(nowdate.getfullyear(), nowdate.getmonth(), nowdate.getdate(), 0, 0, 0, 0);  $('.datepicker').datepicker({     autoclose: true,     todayhighlight: true,     startdate: today  });      $(".datepicker").datepicker("setdate", new date());     $(".departuredate").datepicker("setdate", "+1d");     $( ".datepicker" ).datepicker({ mindate: 0});      $(".arrivaldate").change(function() {         addday($(".arrivaldate").val(), '.departuredate');     });   });      function addday(date_val,fld){         var dt = new date(date_val);         var dt_new = new date(dt.getfullyear(),dt.getmonth(),(dt.getdate() + 1));                 $(fld).val((((dt_new.getmonth() + 1) <=9) ? "0"  + (dt_new.getmonth() + 1) : (dt_new.getmonth() + 1)) + "/" + (((dt_new.getdate()) <=9) ? "0" + dt_new.getdate() : dt_new.getdate()) + "/" + dt_new.getfullyear());     } 

a working example, sorry can't find out wrong yours:

$(".datepicker").datepicker();  $("[name='datedeparture']").change(function(){      $("[name='datedeparture']").val($(this).val());  });  $("[name='datearrival']").change(function(){      $("[name='datearrival']").val($(this).val());  });

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  <script src="//code.jquery.com/jquery-1.10.2.js"></script>  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  <link rel="stylesheet" href="/resources/demos/style.css">  <input type="text" placeholder="arrival date" name="datearrival" class="datepicker arrivaldate">  <input type="text" placeholder="departure date" name="datedeparture" class="datepicker departuredate">  <hr>  <input type="text" placeholder="arrival date" name="datearrival" class="datepicker arrivaldate">  <input type="text" placeholder="departure date" name="datedeparture" class="datepicker departuredate">