Как получить id динамического поля ввода в javascript

Я хочу создать динамическую форму, где я также применяю JavaScript к динамическим элементам.

Сейчас я хочу выяснить, на какое поле (хранящееся в массиве или любой другой структуре данных) в JavaScript был сделан щелчок, чтобы я мог применить сценарий к этому конкретному полю.

HTML выглядит следующим образом:

<div class="triple">
  <div class="sub-triple">
    <label>Category</label>
    <input type="text" name="category" id="category" placeholder="Classes/Instances" required/>
    <ul class="cat-list"></ul>
  </div>
  <div class="sub-triple">
    <label>Relation</label>
    <input type="text" name="relation" id="relation" placeholder="Properties" required/>
    <ul class="rel-list"></ul>
  </div>
  <div class="sub-triple">
    <label>Value</label>
    <input type="text" name="value" id="value" placeholder="Classes/Instances" required/>
    <ul class="val-list"></ul>
  </div>
</div>

Этот "тройной" div является динамическим, и я хочу создать столько "троек", сколько захочет пользователь, это также означает, что поля ввода внутри "тройной" секции также увеличиваются.

Я запутался в том, как добавить javascript к одному элементу ввода. Например, у меня есть входные данные: категория, отношение и значение, и пользователь хочет получить 2 или более тройки, тогда входные данные могут выглядеть как категория2, отношение2 и значение2 или что-то подобное этому.

let category = document.getElementById("category");

category.addEventListener("keyup", (e) => {
  removeElements();
  listDown(category, sortedClasses, ".cat-list")

});

Если я, допустим, кликнул на категорию2, как мне сообщить об этом моему javascript, поскольку эти поля полностью динамические.

Summary: Пользователь добавляет повторяющиеся секции тройки (содержащие 3 элемента ввода), где id каждого элемента ввода генерируется динамически. Мой скрипт выше работает только для первой тройной секции, так как идентификаторы фиксированы, так как для последующих "тройных" секций идентификаторы полей меняются. Как мне определить (увидеть, какой элемент был щелкнут) и получить эти динамические идентификаторы

Попробуйте прослушать родительский элемент, а затем использовать цель события, чтобы определить идентификатор входа. Поскольку события дочерних элементов будут всплывать, вы сможете прослушивать все дочерние элементы

e.g.

let parentElement = document.querySelector(".triple");
parentElement.addEventListener("click", (e) => {
    console.log(e.target.id);
});

Вы можете использовать onfocus event

<div class="triple">
  <div class="sub-triple">
    <label>Category</label>
    <input type="text" name="category" id="category" placeholder="Classes/Instances" onfocus="onFocusCategoryInput()" required/>
    <ul class="cat-list"></ul>
  </div>
  <div class="sub-triple">
    <label>Relation</label>
    <input type="text" name="relation" id="relation" placeholder="Properties" onfocus="onFocusRelationInput()" required/>
    <ul class="rel-list"></ul>
  </div>
  <div class="sub-triple">
    <label>Value</label>
    <input type="text" name="value" id="value" placeholder="Classes/Instances" onfocus="onFocusValueInput()" required/>
    <ul class="val-list"></ul>
  </div>
</div>

Вернуться на верх