Почему моя <LI>отправка последовательно отправляет первый элемент в списке?

Question

Мой код создает динамический c список, подобный следующему:

form = "";
form+= "<li>";
form+= "<form id='formid_" + itemno + "' class='form' method='post'>";
form+= " some options go here ";
form+= "<button type='submit' class='selection'>Select This Option</button>";
form+= "</form>";
form+= "</li>";
form+= "<li>";
form+= "<form id='formid_" + itemno + "' class='form' method='post'>";
form+= " some other options go here ";
form+= "<button type='submit' class='selection'>Select This Option</button>";
form+= "</form>";
form+= "</li>";
$("#my-output-div").append(form);

Проблема заключается в том, что мне нужно использовать правильный идентификатор формы элементов списка, чтобы получить правильный выбор при нажатии кнопки отправки , но этот идентификатор формы - Dynami c. Я знаю, что могу использовать var formID = $(this).parent().attr("id");, чтобы получить идентификатор формы при клике, но каков наилучший способ реализовать это, чтобы убедиться, что я отправляю фактический выбранный элемент списка? Каждая вторая попытка всегда захватывает самый первый элемент списка в списке независимо от того, какая кнопка отправки была нажата. Я знаю, что не могу использовать класс:

 $(document).on('submit', '.locationForm', function(e) {
            e.preventDefault();
            // do something 
});

Answer 1

Что если вы отправите объект события при нажатии? Тогда из объекта события вы можете извлечь данные элемента, по которому щелкнули?

https://api.jquery.com/event.data/

эта ссылка объясняет немного больше? Лично я использую Angular для динамических c веб-приложений, но это также должно работать.

РЕДАКТИРОВАТЬ:

этот код является примером:

 $(document).ready(function() {
        $("a").click(function(event) {
            alert(event.target.id);
        });
    });

Я получил его из этого поста в Stackoverflow Получение идентификатора элемента, который вызвал событие