How do I use simplepicker with two instances

See more:

Javascript

CSS

HTML

Could someone please advise on how I can use Simplepicker with two instances. The first button (start date) are working, but I am not sure how to trigger the second calendar (end date). Please find the code below:

What I have tried:

<button type="button" class="simplepicker-btn">Select start date</button>
                      <div class="event-log">
                        <br>
                      </div>
                      <input class="permitinfo" value="" name="datecreated" id="myInput" placeholder="" type="hidden"></input>
                

                      <button type="button" class="simplepicker-btn2">Select end date</button>
                      <div class="event-log2">
                        <br>
                        </div>
                      <input class="permitinfo" value="" name="enddate" id="myInput2" placeholder="" type="hidden"></input>

<pre>   <script>
              let simplepicker = new SimplePicker({
                zIndex: 10,
              
              });
              
              const $button = document.querySelector('.simplepicker-btn');
              const $eventLog = document.querySelector('.event-log');
              $button.addEventListener('click', (e) => {
                simplepicker.open();
              });
              
              const input = document.getElementById("myInput"); // <- 1) Grab the input
              // $eventLog.innerHTML += '\n\n';
              simplepicker.on('submit', (date) => {
                $eventLog.innerHTML += date + '\n';
                
                            
              formatted = date.toISOString().substring(0,11).replace('T', '');
        
              input.value = formatted; // <- 2) Update the input value
            
              });
              
              simplepicker.on('close', (date) => {
                $eventLog.innerHTML += 'Closed' + '\n';
              });
              
            </script>
            








            <script>
              let simplepicker = new SimplePicker({
                zIndex: 10,
              
              });
              
              const $button = document.querySelector('.simplepicker-btn2');
              const $eventLog = document.querySelector('.event-log2');
              $button.addEventListener('click', (e) => {
                simplepicker.open();
              });
              
              const input = document.getElementById("myInput2"); // <- 1) Grab the input
              // $eventLog.innerHTML += '\n\n';
              simplepicker.on('submit', (date) => {
                $eventLog.innerHTML += date + '\n';
                
                            
              formatted = date.toISOString().substring(0,11).replace('T', '');
        
              input.value = formatted; // <- 2) Update the input value
            
              });
              
              simplepicker.on('close', (date) => {
                $eventLog.innerHTML += 'Closed' + '\n';
              });
              
            </script>