'How init modal window for multiple times (Geowidget) Inpost

I have a marketplace with a few vendors. In cart clients who adds products from few vendors have to select few points of parcel locker. My script is good for one vendor - one select point but not for few. When client click on first select points - can't select next point because modal window is inicialized already and return data to first point. What can I improve to make javascript work independently of several vendors?

<script src="https://geowidget.easypack24.net/js/sdk-for-javascript.js"></script>
<script type="text/javascript">
    window.easyPackAsyncInit = function () {
        easyPack.init({
            defaultLocale: 'pl',
            mapType: 'osm',
            searchType: 'osm',
            points: {
                types: ['parcel_locker', 'pop'],
                functions: ['parcel_collect']
            },
            map: {
                initialTypes: ['parcel_locker'],
            }
        });
    };
    function openModal(id_method) {
        easyPack.modalMap(function(point, modal) {
            $('input[name="parcel_locker_name_'+id_method+'"]').val(point.name);
            modal.closeModal();
            console.log(point);
        }, { width: 500, height: 600 });
    }
</script>

and php/html:

<p>Vendor 1</p>
 <div class="parcel_locker">
    <input type="hidden" class="custom-control-input" name="parcel_locker_name_1" id="parcel_locker_name_1" value="">
    <button id="button_select_parcel_locker_1" class="btn btn-lg btn-custom" onclick="openModal(1); return false;">Select parcel locker</button>
</div>
<p>Vendor 2</p>
 <div class="parcel_locker">
    <input type="hidden" class="custom-control-input" name="parcel_locker_name_2" id="parcel_locker_name_2" value="">
    <button id="button_select_parcel_locker_2" class="btn btn-lg btn-custom" onclick="openModal(2); return false;">Select parcel locker</button>
</div>
<p>Vendor (n)</p>
 <div class="parcel_locker">
    <input type="hidden" class="custom-control-input" name="parcel_locker_name_(n)" id="parcel_locker_name_(n)" value="">
    <button id="button_select_parcel_locker_n" class="btn btn-lg btn-custom" onclick="openModal(n); return false;">Select parcel locker</button>
</div>


Solution 1:[1]

I come up with idea to pass id in easyPack.init (vendor id for example)

window.easyPack.init({
        defaultLocale: "pl",
        mapType: "osm",
        searchType: "osm",
        packageID: singlePackage.packageID,   < -----
        points: {
            types: ["parcel_locker"],
        },
        map: {
            initialTypes: ["parcel_locker"],
        },
    });

then in window.easyPack.modalMap you can check passed id with

modal.easyPackConfig.packageID

and with this id save chosen point to certain vendor

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 KonradPlonka