Не работает endpoint кнопки, загружаемой JS

Есть разметка, загружаемая js'ом на страницу:

function updateInfoBlockById(response) {
            $('.pack').empty();
            Object.keys(response).forEach(function(id) {
                var info = response[id];
                document.getElementById('dateBadge').textContent = 'Ближайшее доступное время: ' + info.date;
                let block = `
                    <ul style="list-style-type: none;">
                        <li><strong>№: </strong> <span id="number">${info.user_pack_num}</span></li>
                        <li><strong>Сортимент: </strong> <span id="wood_type">${info.wood_type}</span></li>
                        <li><strong>ДхШхВ: </strong> <span id="dimensions">${info.dimensions}</span></li>
                        <li><strong>Объем: </strong> <span id="volume">${info.volume}</span></li>
                    </ul>

                    <button  style="z-index: 1000; margin: 0; position: absolute; top: 0; right: 0;" class="btn btn-sm"
                            hx-get="/stock_plan/edit-pack/${info.data_pack_id}/${info.pack_id}/" hx-target="#dialog">
                       butt
                    </button>
                    <span class="packDate" style="margin: 3px; position: absolute; bottom: 0; right: 0; font-size: 12px;">${info.date.split(' ')[0]}</span>
                `;
                $('#'+ id ).html(block);



            });

По своей сути каждая итерация предоставляет блок информации со своими данными. И проблема заключается в том, что кнопка при клике на нее не срабатывает. back-end написан на джанго и end-point выглядит следующим образом:

def edit_pack_view(request, data_pack_id, pack_id):
    data_pack_instance = get_object_or_404(DataPack, pk=data_pack_id)
    pack_instance = get_object_or_404(Pack, pk=pack_id)

    if request.method == 'POST':
        form = EditPackForm(request.POST, data_pack_instance=data_pack_instance, pack_instance=pack_instance)
        if form.is_valid():
            form.save(data_pack_instance=data_pack_instance, pack_instance=pack_instance)
            return HttpResponse(
                status=204,
                headers={
                    'HX-Trigger': json.dumps({
                        "planChanged": None
                    })
                }
            )

    else:
        form = EditPackForm(data_pack_instance=data_pack_instance, pack_instance=pack_instance)
    return render(request, 'stock_plan/edit_pack_form.html', {
        'form': form,
        'data_pack': data_pack_instance,
        'pack': pack_instance
    })

Сам end-point рабочий и вся логика с модальным окном тоже. Так как если поместить эту кнопку статично в файл со статичным url(заранее заданным), то все работает прекрасно.Иногда эта кнопка при перезагрузке может сработать, а чаще всего нет. Ошибок никаких нигде нет.