Bootstrap Modal relatedTarget

There are 5 buttons triggering a modal. In modal, a string is inputted and this is then set as the text for the respective button i.e. the button that triggered it.

I used event.relatedTarget and was able to access the respective button. This worked for the first time but in second attempt (clicking another button to trigger the modal) the event.relatedTarget took in consideration both the buttons. And third time it took all three and so on.

Is there anyway to reset this mapping anyhow?

Here is my Modal made dynamically in JavaScript:

'<div class="modal fade" id="editTitleModal" role="dialog">'+
                            '<div class="modal-dialog modal-lg">'+
                                '<div class="modal-content">'+
                                    '<div class="modal-header">'+
                                        '<h4 class="modal-title">Edit column label</h4>'+
                                        '<button type="button" class="close" data-dismiss="modal">&times;</button>'+
                                    '</div>'+
                                    '<div class="modal-body" style="padding: 2rem;">'+
                                        '<h6 class="mb-2">Select a field for this column</h6>'+

                                        "<select id='columnLabel' style='border: solid #000 0.1rem;' class='csv-select'>" +
                                            "<option class='select-none' value='select-none'>Select Value</option>";
                                            for (let i = 0; i < data.header.length; i += 1) {
                                                html = html + "<option value='" + data.header[i][0].toString().substr(0, 30) + "'>"+ data.header[i][0].toString().substr(0, 30) +"</option>";
                                            }
                                        html = html + "</select>"+
                                    '</div>'+

                                    '<div class="modal-footer">'+
                                        '<button type="button" style="width: 6rem; margin-left: 33rem;" class="blue-fill-btn" id="updateHeader">Confirm</button>'+
                                        '<button type="button" style="width: 6rem; margin-right: 2rem;" class="outline-stand-btn" id="closeModal" data-dismiss="modal">Close</button>'+
                                    '</div>'+
                                '</div>'+
                            '</div>'+
                        '</div>';

Here is one out of five buttons, calling the modal:

<td class='cellDesign btn' data-toggle='modal' onclick='sendToModal()' data-target='#editTitleModal'> data.header[i][0].toString().substr(0, 30) </td>

Here is the javascript function:

function sendToModal() {
            $('#editTitleModal').one('show.bs.modal', function (event) {
                $(document).on('click', '#updateHeader', function () {
                    console.log(event.relatedTarget);
                    if ($('#columnLabel')[0].value != 'select-none') {
                        $(event.relatedTarget).html($('#columnLabel')[0].value);
                       $('#closeModal').click();
                    }
                });
            });
        }