Заполнить форму, используя данные таблицы

Таким образом, у меня есть форма, через которую я добавляю записи в свою базу данных, я пытаюсь использовать ту же форму для обновления / редактирования существующих записей в базе данных.

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

Это то, что я пытаюсь сделать, когда пользователь нажимает кнопку редактирования на любую строку, данные в этой строке должны быть автоматически заполнены в форму.

Я сделал jsfiddle здесь

Сценарий JS, который я пробовал:

$("#tableID").on("click", ".edit_button", function() { var data = $(this).closest("td").siblings().map(function() { return $(this).text(); }).toArray(); console.log(data); }); // the event is not recognized. no action on clicking. 

Там довольно много методов, которые я нашел здесь stackoverflow, но большинство из них не реагируют на событие click или возвращают значения null / empty, это потому, что форма заполняется динамически?

Я довольно новичок в веб-разработке, любая помощь будет оценена по достоинству. Благодаря!

Примечание: база данных содержит более 20 + записей (динамически добавляется), в Jsfiddle я показал только 1, чтобы сохранить код в чистоте. извините за отсутствие стиля css: P