Визуализация столбца Datatables - значение строки не обновляется при начальной загрузке таблицы

Question

У меня есть таблица DataTables со следующими столбцами, показанными на скриншоте ниже.

Существует столбец «Действия», в котором пользователь нажимает кнопку «Редактировать», и он вызывает модальное окно. Модал имеет метку «Идентификатор счета», на которой должно отображаться значение в столбце «Идентификатор» таблицы данных, как показано на снимке экрана ниже.

Моя проблема в том, что при начальной загрузке таблицы, когда я нажимаю кнопку Изменить в строке, она показывает мне значение в первой строке. Мой пример, показанный на скриншотах выше, когда я нажимаю на 3-й строке. Но когда таблица перерисовывается / обновляется, когда я выполняю поиск, она обновляется до правильного значения, а затем снова возвращается, когда я очищаю окно поиска.

Код визуализации столбца для столбца «Действия» в Datatable

columnDefs: [
            {
                targets: -1,
                title: 'Actions',
                orderable: false,
                render: function(data, type, row, meta) {
                    return `
                    <button type="button" class="btn btn-bold btn-label-brand btn-sm" data-toggle="modal" data-target="#kt_modal">Edit</button>
                    <!--begin::Modal-->
                            <div class="modal fade" id="kt_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                                <div class="modal-dialog modal-lg" role="document">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <h5 class="modal-title" id="exampleModalLabel">Edit Billing Line</h5>
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                            </button>
                                        </div>
                                        <div class="modal-body">
                                            <form>
                                                <div class="form-group">
                                                    <label for="recipient-name" class="form-control-label">Billing ID: <span id="bill_id">`+ row[0] +`</span></label>
                                                </div>
                                                <div class="form-group">
                                                    <label for="message-text" class="form-control-label">Billing Line:</label>
                                                    <textarea class="form-control" id="message-text"></textarea>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                            <button type="button" class="btn btn-primary">Submit</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        <!--end::Modal-->
                        `;
                },
            },

Поле «Идентификатор счета» генерируется строкой [0], которая получает значение из первого столбца этот ряд. Есть ли что-то, что я упустил в DataTables в отношении рендеринга столбцов, что должно позволить ему правильно отображать значения при загрузке таблицы?