Как лучше отследить клик по одной из кнопок в таблице и передать данные из ячейки с этой кнопкой?

Question

[khodos_dmitry]

Есть таблица с такими строками:

<tr>
<td>Петербургский социальный коммерческий банк</td>
<td>Петербургский Социальный Коммерческий Банк</td>
<td></td>
<td>ул. Типанова, 27/39, Санкт-Петербург, Россия</td>
<td class="add">
				<input class="bank_id" type="hidden" name="bank_id" value="156">
				<input class="id"type="hidden" name="id" value="93794">
				<button>Добавить</button>
</td></tr>

Вот таким кодом я пытаюсь отловить клик по кнопке button и передать в обработчик данные:

<script>
	$(document).ready(function(){
		$('button').on('click', function() {
			var bank_id = $('input.bank_id').val();
			var id = $('input.id').val();
			$.ajax({
				method: 'POST',
				url: 'bank_id_by_name_ajax.php',
				data: {id: id, bank_id: bank_id}
			})
			.done(function() {
				
			}
			)
		}
		)
	})
</script>

Но, понятно, что передаются всегда данные только из первой строки.
Как сделать, чтобы данные передавались из нужной строки (ячейки)? Как это правильно делать?

Answer 1

[Алексей Уколов]

var bank_id = $(this).siblings('input.bank_id').val();
var id = $(this).siblings('input.id').val();

Кнопке только лучше тоже специальный класс задать и подписываться на события по нему. Сейчас вы вообще все кнопки на странице слушаете.

Comments

[khodos_dmitry]

Можешь еще объяснить почему не удаляется строка при удачном завершении:

$(document).ready(function(){
		$('button.btn-add').on('click', function() {
			var bank_id = $(this).siblings('input.bank_id').val();
			var id = $(this).siblings('input.id').val();
			console.log(bank_id, id);
			$.ajax({
				method: 'POST',
				url: 'cpl_offices_bank_id_by_name_ajax.php',
				data: {id: id, bank_id: bank_id}
			})
			.done(function() {
				$(this).closest('tr').remove();
			}
			)
		}
		)
	})

Answer 2

[Евгений]

добавьте на tr класс, например element

<script>
  $(document).ready(function(){
    $('button').on('click', function() {
var element = $(this).parents('.element');
      var bank_id = $('input.bank_id', element ).val();
      var id = $('input.id', element ).val();
      $.ajax({
        method: 'POST',
        url: 'bank_id_by_name_ajax.php',
        data: {id: id, bank_id: bank_id}
      })
      .done(function() {
        
      }
      )
    }
    )
  })
</script>