Не могу получить актуальные данные из input модального окна при отправке

Принцип очень простой, у меня таблица с несколькими строками, по клику на каждую делаю .modal('show') модального окна, сам заполняю input-ы информацией которую нужно изменить, далее по клику на Сохранить, передаю данные через ajax в php для дальнейшей обработки. Но, если я несколько раз сделаю открытие модального окна и закрою для разных строк, у меня выполнится передача через ajax ровно столько раз, сколько я вызывал модальные окна.

HTML

<div class="modal" id="modalMain">
 <div class="modal-body">
  <input type="text" autocomplete="off" id="valNumber1" style="width: 100%;height: 30px;">
  <input type="text" autocomplete="off" id="valNumber2" style="width: 100%;height: 30px;">
  <input type="text" autocomplete="off" id="valNumber3" style="width: 100%;height: 30px;">
 </div>
 <div class="modal-footer"> 
   <button id="accept_edit" >Применить</button>
   <button id="close" data-dismiss="modal">Закрыть</button>
 </div>
</div>

JS

строка.on('click',()=>{
  $('#modalMain').modal('show');/* по клику на строку показываем */
})

$('#accept_edit').on('click', function () {
   let valNumber1= document.getElementById('valNumber1').value;
   let valNumber2= document.getElementById('valNumber2').value;
   console.log(valNumber2);
   $('#modalMain').modal('hide');
   /* и уже тут, если мы несколько раз откроем и закроем модальное окно - у нас будет в логах выводить информацию как будто со всех модальных окон что ты открывал, какой-то кэш будто */
});

Кто сталкивался. подскажите пожалуйста как справились.