How to create Two calendars and link them together using JavaScript

Question

I am using LightPick Calendar.
It is working fine, but the feature i need to implement is to make two calendars on same page and link them together. I want both of them inlined calendars. I only want to select range in that calendars. For example, I want to select a range in either of calendars the 2nd calendar should update its value too.

Currently I have two calendars on one page and I tried to link them together

//HTML FILE

                  <div class="card">
                      <div class="card-body">
                          <div class="row">
                              <div class="col-md-5">
                                  <p id="cal-result-2">&nbsp;</p>
                                  <input type="text" id="calendar-2" class="form-control form-control-sm" style="display: none;"/>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
              <p class="lead">Calendar 3 - Select Range</p>
                  <div class="card">
                      <div class="card-body">
                          <div class="row">
                              <div class="col-md-5">
                                  <p id="cal-result-3">&nbsp;</p>
                                  <input type="text" id="calendar-3" class="form-control form-control-sm" style="display: none;"/>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>




// JS File
// calendar-2
new Lightpick({
  field: document.getElementById('calendar-2'),
  inline: true,
  singleDate: false,
  selectForward: true,
  onSelect: function(start, end){
      document.getElementById('cal-result-3').innerHTML = rangeText(start, end);
      document.getElementById('cal-result-2').innerHTML = rangeText(start, end);
  }
});


// calendar-3
new Lightpick({
  field: document.getElementById('calendar-3'),
  inline: true,
  singleDate: false,
  selectForward: true,
  onSelect: function(start, end){
      document.getElementById('cal-result-2').innerHTML = rangeText(start, end);
      document.getElementById('cal-result-3').innerHTML = rangeText(start, end);
  }
});

but they are updaing values in text html but not in real time inlined calendars. I want help in linking those calendars.
I want help in linking those calendars.

See this to check OutPut

Answer 1

daterange picker site has demo link for linked calendars as shown in the image, here is the link for demo site content https://github.com/dangrossman/daterangepicker