javascript - 第二个div对象不会在弹出窗口中打开

我买了一些主题。在这个主题中，有一个checkin/checkout部分，用户可以从dateto和guests数量中选择date。
我遇到的问题是我需要两个有签入/签出功能的部分，另一个是我在第一个部分时无法获得弹出窗口。
问题是子节的唯一标识符。
这是照片：
这是一个HTML标记：

<div class="container platinumcalendar">
    <div class="sc-hb-rooms-search style-01">
        <div class="hotel-booking-search style-01">
            <ul class="hb-form-table">
                <li><input type="text" id="inputPlatinumDate" class="multidate" value="" placeholder="Check-In" />
                </li>

                <li class="hb-form-field hb-form-check-in">
                    <div class="label">Check-In</div>
                    <div class="hb-form-field-input hb_input_field">
                        <input type="text" id="checkinday_platinum" class="day" value="" style="width: 68px;" />
                        <input id="checkinmonth_platinum" class="month" type="text" value="" />
                        <input type="hidden" name="check_in_date_platinum" id="check_in_date1"
                            class="check-date hasDatepicker" value="" />
                    </div>
                </li>

                <li class="hb-form-field hb-form-check-out">
                    <div class="label">Check-Out</div>
                    <div class="hb-form-field-input hb_input_field">
                        <input type="text" id="checkoutday_platinum" class="day" value="" style="width: 83px;" />
                        <input id="checkoutmonth_platinum" class="month" type="text" value="" />
                        <input type="hidden" name="check_out_date_platinum" id="check_out_date_platinum"
                            class="check-date hasDatepicker" value="" />
                    </div>
                </li>
                <li class="hb-form-field hb-form-number">
                    <div class="label">Number</div>
                    <div id="guests" class="hb-form-field-input hb_input_field">
                        <input type="text" id="number2" class="day" value="01" />
                        <input class="month" type="text" value="Guests" />
                    </div>
                    <div class="hb-form-field-list">
                        <div class="hb-form-field-input hb-guest-field">
                            <select name="adults_capacity" tabindex="-1" aria-hidden="true">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                            </select>
                            <span class="name">Guests</span>
                            <span class="number-icons goUp"><i class="ion-plus"></i></span>
                            <span class="number-icons goDown"><i class="ion-minus"></i></span>
                        </div>
                    </div>
                </li>
            </ul>
            <p class="hb-submit">
                <span class="contact-info">Need Help: <span>(+381) xxxxxx</span></span>
                <button class="platinum_inquiry" type="submit" data-toggle="modal" data-target="#exampleModal">Send
                    Inquiry</button>
            </p>
        </div>
    </div>
</div>

<div class="empty-space"></div>
<div class="empty-space"></div>
<div class="empty-space"></div>
<div class="container goldcalendar">
    <div class="sc-hb-rooms-search style-01">
        <div class="hotel-booking-search style-01">

            <ul class="hb-form-table">
                <li><input type="text" id="inputGoldDate" class="multidate" value="" placeholder="Check-In" /></li>

                <li class="hb-form-field hb-form-check-in">
                    <div class="label">Check-In</div>
                    <div class="hb-form-field-input hb_input_field">
                        <input type="text" id="checkinday_gold" class="day" value="" style="width: 68px;" />
                        <input id="checkinmonth_gold" class="month" type="text" value="" />
                        <input type="hidden" name="check_in_date_gold" id="check_in_date_gold"
                            class="check-date hasDatepicker" value="" />
                    </div>
                </li>

                <li class="hb-form-field hb-form-check-out">
                    <div class="label">Check-Out</div>
                    <div class="hb-form-field-input hb_input_field">
                        <input type="text" id="checkoutday_gold" class="day" value="" style="width: 83px;" />
                        <input id="checkoutmonth_gold" class="month" type="text" value="" />
                        <input type="hidden" name="check_out_date" id="check_out_date_gold"
                            class="check-date hasDatepicker" value="" />
                    </div>
                </li>
                <li class="hb-form-field hb-form-number">
                    <div class="label">Number</div>
                    <div id="guests" class="hb-form-field-input hb_input_field">
                        <input type="text" id="number" class="day" value="01" />
                        <input class="month" type="text" value="Guests" />
                    </div>
                </li>
            </ul>
            <p class="hb-submit">
                <span class="contact-info">Need Help: <span>(+381)xxxxxxxx</span></span>
                <button class="gold_inquiry" type="submit" data-toggle="modal" data-target="#exampleModal">Send
                    Inquiry</button>
            </p>
        </div>
    </div>

现在有趣的是，我不太明白：在theme.js文件中，有一部分是关于这个部分的：

$('#guests').each(function () {
    //debugger;
    var $form_list = $('.sc-hb-rooms-search.style-01 .hb-form-field-list');
    $('#guests').on('click touch', function () {
        $form_list.toggleClass('active');
    });
    $(document).on('click touch', function (event) {
        if (!$(event.target).parents().addBack().is('#guests')) {
            $form_list.removeClass('active');
        }
    });
    $form_list.on('click touch', function (event) {
        event.stopPropagation();
    });
});

$('.goUp').on('click', function () {
    var index = $('select[name="adults_capacity"] option:selected').index();
    var count = $(' select[name="adults_capacity"] option').length;

    if (index + 1 >= count) {
        return;
    }

    var selected = $($('select[name="adults_capacity"] option')[index + 1]).val();

    $('select[name="adults_capacity"]').val(selected);

});
$('.goDown').on('click', function () {
    var index = $('select[name="adults_capacity"] option:selected').index();
    if (index <= 0) {
        return;
    }
    var selected = $($('select[name="adults_capacity"] option')[index - 1]).val();
    $('select[name="adults_capacity"]').val(selected);
});

function changeNumber() {
    var $max_child = $(' select[name="max_child"] option:selected').html();
    var $adults_capacity = $('select[name="adults_capacity"] option:selected').html();
    var $number_total = Math.round($adults_capacity);
    if ($number_total < 10) {
        $('#number').val('0' + $number_total);
    } else {
        $('#number').val($number_total);
    }
}

$('.sc-hb-rooms-search.style-01 .goUp').on('click', function () {
    changeNumber();
});
$('.sc-hb-rooms-search.style-01 .goDown').on('click', function () {
    changeNumber();
});

这个JS脚本被称为页面的onLoad，所以我不知道如何放置第二个惟一id并正确调用它。
我试过了，但那没用。。
我认为键是$('#guests, #guests1').each(function () {...}，但这对我来说没有意义，因为它是一个类选择器，应该与两个部分都相关，对吧？
我不想用css文件来打扰你，因为我认为在这种情况下它们是不相关的。
尝试1：
我试图在js中添加重复的代码，如下所示：

$('#guests').each(function () {
            //debugger;
            var $form_list = $('.sc-hb-rooms-search.style-01 .hb-form-field-list');
            $('#guests').on('click touch', function () {
                $form_list.toggleClass('active');
            });
            $(document).on('click touch', function (event) {
                if (!$(event.target).parents().addBack().is('#guests')) {
                    $form_list.removeClass('active');
                }
            });
            $form_list.on('click touch', function (event) {
                event.stopPropagation();
            });
        });

        $('#guests1').each(function () {
            //debugger;
            var $form_list1 = $('.sc-hb-rooms-search.style-01 .hb-form-field-list');
            $('#guests1').on('click touch', function () {
                $form_list1.toggleClass('active');
            });
            $(document).on('click touch', function (event) {
                if (!$(event.target).parents().addBack().is('#guests1')) {
                    $form_list1.removeClass('active');
                }
            });
            $form_list1.on('click touch', function (event) {
                event.stopPropagation();
            });
        });

我分别编辑了输入var $form_list = $('.sc-hb-rooms-search.style-01 .hb-form-field-list');到id=guests的第二部分
结果：现在第一个或第二个弹出窗口都不起作用。
链接到回购协议：repo

最佳答案

我认为，为什么它不起作用的答案在于：

$('#guests').on('click touch', function () {
   $form_list.toggleClass('active');
});

在这里，如果您单击“来宾”，将切换“表单”列表。但不能只在这里添加#guests2，因为这样每次单击都会切换两个div。
目前，这个函数的编写方式是，它只能包含在页面中一次，如果您需要它多次，您需要重写它。
这是一个关于如何开始的想法，尝试用这个块替换所有$('#guests').each()函数：

 <div class="hb-form-field-input hb_input_field MY_TOGGLE_CLASS">
       <input type="text" id="number2" class="day" value="01" />
        <input class="month" type="text" value="Guests" />
 </div>
 <div class="hb-form-field-list MY_SECOND_CUSTOM_CLASS"> ... </div>


//Multidate
$('.MY_TOGGLE_CLASS').on("click", function() {
    $(this).next().toggleClass('active');
});

$('.MY_SECOND_CUSTOM_CLASS').on('click touch', function(event) {
    event.stopPropagation();
});

$(document).on('click touch', function (event) {
  if (!$(event.target).closest('.MY_TOGGLE_CLASS').length) {
     $('.MY_SECOND_CUSTOM_CLASS').removeClass('active');
  }

});