Заполнение полей ввода с помощью сгенерированной таблицы jQuery

Я пытаюсь заполнить поля в поле ввода моего модального окна. Мое модальное окно появляется после того, как я нажимаю кнопку Edit в таблице, и оно должно заполнять поля в соответствии со строкой таблицы, в которой нажата кнопка. Я создал таблицу исключительно с помощью jQuery и извлек данные с помощью JSON. Это код, генерирующий мою таблицу:

$.getJSON("${pageContext.request.contextPath}/hostJSON", function (data) {
                var $table = $("#hostTable");
                $.each(data, function (i, h) {
                    if (h.status === "true") {
                        h.status = "<label class=\"label\" style=\"background-color: #b2c4aa;color:white\">Waiting</label>";
                    } else {
                        h.status = "<label class=\"label\" style=\"background-color: #FF8668;color:white\">Done</label>";
                    }
                    var $tr = $("<tr/>").attr('style', 'font-size:90%');
                    $("<td/>").html(h.id).appendTo($tr);
                    $("<td/>").html(h.name).appendTo($tr);
                    $("<td/>").html(h.contact).attr('style', 'text-align:center').appendTo($tr);
                    $("<td/>").html(h.email).attr('style', 'text-align:center').appendTo($tr);
                    $("<td/>").html(h.address).appendTo($tr);
                    $("<td/>").html(h.status).attr('style', 'text-align:center').appendTo($tr);
//BELOW IS THE REQUIRED LINE, WHICH IS A BUTTON:
                    $("<td/>").html("<span class=\"hostEditBtn\" data-host-name=\""+h.name+"\" data-toggle=\"modal\" data-target=\"#editEventHostModal\"><button class=\"btn btn-xs\" style=\"background-color:#b2c4aa;color:white\" data-toggle=\"tooltip\" title=\"Edit\"><span class=\"glyphicon glyphicon-pencil\"></span> Edit</button></span>").attr('style', 'text-align:center').appendTo($tr);
                    $tr.appendTo($table);
                });
            });

Когда нажимается вышеупомянутая кнопка, она успешно открывает мое модальное окно, но поле не заполняется.

$(".hostEditBtn").on('click', function () {
    var $this=$(this);
    $("#hostName").val($this.attr('data-host-name'));
});

Я включаю только часть Name, чтобы не загромождать свой пост.

Я чувствую, что должен также упомянуть, что у меня есть в общей сложности 3 файла .jsp в этом проекте, а именно index.jsp, modals.jsp и jquery.jsp, которые я включаю в свой файл index.jsp следующим образом:

<%@include file="[name of file].jsp"%>

Почему это не работает? Это потому, что пользовательский атрибут (data-host-name) создается с помощью jQuery? Как я могу заставить это работать?