Cannot add two "Range Date Pickers"

Cannot add two "Range Date Pickers"

Hi, I am new to development and don't have too much experience.

I want to add multiple sets of "Range Data Pickers" on a single web page.

I have used the source code from here: http://jqueryui.com/datepicker/#date-range .

In my body I have two divs within a CSS Grid. Within them i have to google charts and underneath them the two date pickers. I have them both showing up in their respective places. The first date picker works, when the text field is clicked it prompts for a date to be picked, the second one does not.

I have tried searching multiple forums but have not resolved my problem. (I have tried using different id's and have multiplied the function with different ids provided from the reference above.)

Can anyone help please?  (Below is the two divs i am using, the form1 and to1 are the names of ids in my copied function)

<div class='wrapper'>
   <div>
        <div id='curve_chart'></div>
          
        <div id="date1">
               <label for="from">From</label>
               <input type="text" class="from" id="from">
               <label for="to">to</label>
               <input type="text" class="to" id="to">
           </div>
            
   </div>

   <div>
           <div id='chart_div'></div>
          
           <div id="date2">
                   <label for="from1">From</label>
                   <input type="text" class="from1" id="from1">
                   <label for="to1">to</label>
                   <input type="text" class="to1" id="to1">
           </div>

   </div>
</div>