Datepicker仅在第一个模式中工作

Question

I have a page with all the products displayed for rent and below those products i placed a visual composer popup modal. The Modal is working for every product but the problem here is there are start and end date fields in modal which i created using contact form 7 and i given id's to trigger the date-picker on select of the input fields but the date-picker is working for the first modal only. From second modal it shows nothing and all the buttons have same classes and ids and the entire page is created using visual composer plugin.

So, how can i get date-picker for all the modals in that page.

Here is Jquery code

$( "#end_date" ).datepicker({
        beforeShow: function() {
        setTimeout(function(){
            $('.ui-datepicker').css('z-index', 99999999999999);
        }, 0);
    }});
       $( "#start_date" ).datepicker({
        beforeShow: function() {
        setTimeout(function(){
            $('.ui-datepicker').css('z-index', 99999999999999);
        }, 0);
    },
        minDate: new Date(),
        onSelect : function(selected_date){
        var selectedDate = new Date(selected_date);
        var msecsInADay = 86400000;
        var endDate = new Date(selectedDate.getTime() + msecsInADay);

        $("#end_date").datepicker("option", "minDate", endDate );
      }
    });

Thank you

Answer 1

herein lies the problem -

"...From second modal it shows nothing and all the buttons have same classes and ids and the entire page is created using visual composer plugin..."

it is fine to replicate the classes since you can have more than one instance of a class but each ID must be unique . If you duplicate ID's then only the first one will be actioned - as you have experienced. You need to have differnt ids for the second modal.

You could redesign the workflow and use only one modal which would solve that issue.