我有一个在我的网站上打开表单的按钮。我如何更改它以使其通过单击打开表单？
我发现第一次点击按钮后，id从“51”变为“card_5”或“50”变为“card_4”等等。
这是按钮的代码

let buttons = document.querySelectorAll('.buy_product_form');
  buttons.forEach(el => {
    el.addEventListener('click', e => {
      let button = e.target;
      let atr = button.dataset.title;
        let id = button.dataset.id;
        let options = button.dataset.options;
        let price = button.dataset.price;
        let item_id = button.dataset.item-id;
        let item = button.dataset.item;
        button.id = id;

这是表格的代码

var _form = document.createElement('form');
        _form.className = 'col-md-6 col-md-offset-3 col-sm-12 col-sm-offset-0 form ajaxForm';
        _form.method = 'POST';
        _form.action = '/orders/do_create_order';
        document.body.appendChild(_form);

        var paragraph = document.createElement('p');
        paragraph.className = 'service_title';
        let text = document.createTextNode(atr);
        paragraph.appendChild(text);
        _form.appendChild(paragraph);

        var _item1 = document.createElement('div');
        _item1.className = 'item';
        _form.appendChild(_item1);

        .....(other elements of form)

        var _button = document.createElement('input');
        _button.className = "btn-gray";
        _button.type = "submit";
        _button.value = "Отправить";
        _buttonDiv.appendChild(_button);

        var _reqForm = document.createElement('p');
        _reqForm.id = "req_form";
        _form.appendChild(_reqForm);

        var pop = new Modal('#' + button.id, _form, function () {
        .....(all validations)
      });
    });
  });

};

编辑1
我还有php/html
这是js连接到的页面的一部分

<div class="cards">
<? foreach($catalog_product as $key => $catalog_product_value): ?>
    <div class="card">
        <div class="card__side card__side--front card__side--front-1">
                <div class="header">
                    <h3><?=$catalog_product_value['name']?></h3>
                </div>
                <p class="btn-pink">Подробнее</p>
        </div>
        <div class="card__side card__side--back card__side--back-1">
            <h3><?=$catalog_product_value['header']?></h3>
            <p class="flip-text"><?=$catalog_product_value['title']?></p>
            <?=$catalog_product_value['content']?>
            <button
                id="<?=$catalog_product_value['product_id']?>"
                data-item="product" 
                data-item_id="<?=$catalog_product_value['product_id']?>" 
                data-id="card_<?=($key + 1)?>" 
                data-title="<?=htmlspecialchars($catalog_product_value['header'])?>"
                <? if (!empty($catalog_product_value['options'])): ?>
                    data-options="<?=htmlspecialchars(json_encode($catalog_product_value['options']), ENT_QUOTES, 'UTF-8')?>"
                <? else: ?> 
                    data-price="<?=preg_replace('/[^0-9.]+/', '', $catalog_product_value['price'])?>"
                <? endif; ?>
                class="buy_product_form pop_maker">
                    <?=$catalog_product_value['price']?>
            </button>
        </div>
    </div>
<? endforeach;?>