JQuery функции выполняются вместе даже с другой кнопки

Question

У меня есть 2 кнопки, и каждый раз, когда я выполняю одну из них, она выполняет две функции вместе одну за другой, даже если они выполняют разные действия. Я не могу найти способ разделить две функции на две разные кнопки без путаницы в коде. Я использую переменную с именем key для использования в действии.

Я пытался обернуть их в div и дать им конкретное имя класса, но мне не удалось заставить его работать Функции в конце

var storage = firebase.storage();
var database = firebase.database();
database.ref('declaration').once('value', function(snapshot) {
  if (snapshot.exists()) {
    var content = '';
    snapshot.forEach(function(data) {
      var key = data.key;
      var val = data.val();
      var ker = key + "2";
      var k = key + "1";
      $('#ex-table').append("<tr id='" + key + "'><td>" +
        val.date +
        "</td><td>" +
        val.firstName +
        "</td><td>" +
        val.lastName +
        "</td><td>" +
        val.cin.replace('@gmail.com', '') +
        "</td><td>" +
        val.numTel +
        "</td><td>" +
        "<a href=https://www.google.tn/maps/place/" + val.position + "> My Position </a>" +
        "</td><td>" +
        "<img id='" + k + "' height=200 width=200/>" +
        "</td><td>" +
        val.etat +
        "</td><td><button id='" + key + "'>enoyer equipe</button><button id='" + ker + "'>Delete</button></td></tr>");

      // Fonction de changement d'etat

      var storageRef = storage.ref(val.photo);
      storageRef.getDownloadURL().then(function(url) {
        // Or inserted into an <img> element:
        document.getElementById(k).src = url;
      }).catch(function(error) {
        // Handle any errors
      });

      $(document).on('click', "#" + key, function() {
        var database = firebase.database().ref('declaration')
        var newetat = database.child(key);
        newetat.update({
          "etat": "team sent"
        });
      });
      $(document).on('click', "#" + ker, function() {
        firebase.database().ref('declaration/' + key).remove();
      });
    });
  }
});

<table class="table" id="ex-table">
  <thead>
    <tr>
      <th scope="col">Date</th>
      <th scope="col">Nom</th>
      <th scope="col">Prénom</th>
      <th scope="col">N° CIN</th>
      <th scope="col">Tel</th>
      <th scope="col">Position</th>
      <th scope="col">Photo d'accident</th>
      <th scope="col">Etat</th>
      <th scope="col">Options</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Answer 1

Два выпуска:

1) вы повторно использовали значение атрибута id key (id атрибуты должны быть уникальными в документах HTML)

2) Вы связали события щелчка с идентификаторами key и ker для элементов, которые являются дочерними элементами к элементу <tr>, к которому также привязано событие щелчка (с тем же id).

Чтобы предотвратить «всплытие» события вверх по элементу <tr>, добавьте ссылку на событие в обработчики и добавьте:

event.stopPropagation();

внутри обработчика.

OR

используйте разные id на каждом <tr>.