Как правильно передать «текущий» атрибут в JS?

Question

[inqntrl]

Здравия желаю.

в хеад

<script type="text/javascript">
function delete_tovar() {
	var el = document.getElementById('godel');
	var xx = el.dataset.udalit;
      $.ajax({
           type: "POST",
           url: 'delete-tovar.php',
           data:{
				'action':'delete_tovar',
				'dtid': xx
				},
           success:function(html) {
             alert(html);
           }
      });
 }
</script>

в боди, в цикле foreach создаю:

<div id="godel" data-udalit="<?php print $item[2]; ?>" onclick="delete_tovar()" >Удалить</div>

Получается так, что значения data-udalit у меня на каждой кнопке удалить разные, а вот JS по тегам получает первый результат... как дореализовать ?

к примеру

<div id="godel" data-udalit="1" onclick="delete_tovar()" >Удалить</div>
<div id="godel" data-udalit="2" onclick="delete_tovar()" >Удалить</div>
<div id="godel" data-udalit="3" onclick="delete_tovar()" >Удалить</div>

Если я тыкну на 3й див, то в JS уйдет "1"

Answer 1

[Stalker_RED]

1. id нельзя повторять, они должны быть уникальные.
2. в onclick что-то прописывать было модно лет надцать назад. Давно уже addEventListener везде работает.

document.addEventListener('click', function(evt) {
  if (evt.target.matches('[data-delete]')) {
    const id = evt.target.dataset.delete
    // ajax here
  }
})

<div data-delete="1">Удалить</div>
<div data-delete="2">Удалить</div>
<div data-delete="3">Удалить</div>