JS在同一页面上有多个popover

Question

第二个popover html

<div class="extras">
    <div class="col-sm-4">
        <h2 class="heading-area">Garlic Bread</h2>
        <div class="popover-markup1"> 
            <div class="trigger form-group form-group-lg form-group-icon-left"><i class="fa fa-users input-icon input-icon-highlight"></i>
                <input type="text" name="gralic-passanger-info" id="gralic-passanger-info" class="form-control" value="Garlic Bread">
                <input type="hidden" name="gralic-passengers" id="gralic-passengers" class="form-control" value="1" disabled>
            </div>
            <div class="content1 hide" >
                <div class="form-group">
                    <label class="control-label col-md-7"><strong>Garlic Bread</strong></label>
                    <div class="input-group number-spinner1 col-md-5">
                        <span class="input-group-btn">
                            <a class="" data-dir="dwn"><img src="assets/img/remove.png"></a>
                        </span>
                        <input type="text" disabled name="adult1" id="adult1" class="form-control text-center" value="1" max=9 min=1>
                        <span class="input-group-btn">
                            <a class="" data-dir="up"><img src="assets/img/add-more.png"></a>
                        </span>
                    </div>
                </div> 
            </div>
        </div>
    </div>
</div>

我想在同一页面上有两个popover字段，但是第二个popover只复制第一个popover字段，第二个popover不能正常工作。

如何更改第二个弹出窗口的js？ 请指导我。

我从以下小提琴中提到过： https://jsfiddle.net/gvrc5drL/1/