Pikaday multiple triggers on multiple fields

I'm using the pikaday datepicker for multiple datepicker fields in a form. The datepicker should be triggered by focus on the input field and by clicking on the icon button.

This works when only having one datepicker but when adding multiple on one page only the last datepicker gets triggered when one of the icon buttons is pressed.

Anyone who can help figuring out how to trigger the correct datepicker when the icon button is clicked.

p.s. I'm trying to avoid jQuery in this project so a vanilla js solution is preferred, thanks in advance!

var datepickers = document.querySelectorAll(".js-datepicker");

for (var i = 0; i < datepickers.length; i++) {
  var datepicker = datepickers[i];
  var field = datepicker.querySelector("input");
  var trigger = datepicker.querySelector("button");

  var picker = new Pikaday({
    field: field,
    minDate: new Date('2000-01-01'),
    maxDate: new Date('2020-12-31'),
    yearRange: [2000, 2020],
    firstDay: 1
  });

  trigger.addEventListener("click", function() {
    picker.show();
  });
}

.input {
  margin-bottom: 1.5rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/css/pikaday.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/pikaday.min.js"></script>

<div class="input">
  <label for="input-date">Date picker</label>
  <div class="datepicker js-datepicker">
    <input type="text" 
           name="input-date" 
           id="input-date" 
           placeholder="Pick a date" />
    <button class="button">
      <span class="fa fa-calendar"></span>
    </button>
  </div>
</div>

<div class="input">
  <label for="input-date2">Date picker</label>
  <div class="datepicker js-datepicker">
    <input type="text" 
           name="input-date2" 
           id="input-date2" 
           placeholder="Pick a date" />
    <button class="button">
      <span class="fa fa-calendar"></span>
    </button>
  </div>
</div>

<div class="input">
  <label for="input-date3">Date picker</label>
  <div class="datepicker js-datepicker">
    <input type="text"
           name="input-date3" 
           id="input-date3" 
           placeholder="Pick a date" />
    <button class="button">
      <span class="fa fa-calendar"></span>
    </button>
  </div>
</div>

Solution

You have to initialize the Pikaday individually .Add function onclick="showClander(this)" to each button

var datepickers = document.querySelectorAll(".js-datepicker");
var buttons = document.querySelectorAll("button");
var inputs = document.querySelectorAll("input");
var picker = [];
for (var i = 0; i < datepickers.length; i++) {
  var datepicker = datepickers[i];


  picker[i] = new Pikaday({
    field: inputs[i],
    minDate: new Date('2000-01-01'),
    maxDate: new Date('2020-12-31'),
    yearRange: [2000, 2020],
    firstDay: 1
  });

}

function showClander(obj) {
  for (var i = 0; i < buttons.length; i++) {
    if (buttons[i] == obj) {
      picker[i].show()
    }
  }
}

.input {
  margin-bottom: 1.5rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/css/pikaday.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.5.1/pikaday.min.js"></script>

<div class="input">
  <label for="input-date">Date picker</label>
  <div class="datepicker js-datepicker">
    <input type="text" name="input-date" id="input-date" placeholder="Pick a date" />
    <button class="button" onclick="showClander(this)">
      <span class="fa fa-calendar"></span>
    </button>
  </div>
</div>

<div class="input">
  <label for="input-date2">Date picker</label>
  <div class="datepicker js-datepicker">
    <input type="text" name="input-date2" id="input-date2" placeholder="Pick a date" />
    <button class="button" onclick="showClander(this)">
      <span class="fa fa-calendar"></span>
    </button>
  </div>
</div>

<div class="input">
  <label for="input-date3">Date picker</label>
  <div class="datepicker js-datepicker">
    <input type="text" name="input-date3" id="input-date3" placeholder="Pick a date" />
    <button class="button" onclick="showClander(this)">
      <span class="fa fa-calendar"></span>
    </button>
  </div>
</div>