JQuery невозможно получить значение из динамически добавленных входов

Question

У меня есть этот скрипт, который я собираюсь запустить:

<script>
    $(document).ready(function () {
        var sd = $("#StartDate").val();
        var ed = $("#EndDate").val();
        $("#userReportGenerate").click(function (e) {
            e.preventDefault();
            console.log(sd);
            console.log(ed);
            $("<input/>").attr("type", "hidden").attr("id", "uStartDate").attr("name", "StartDate").attr("value", sd).appendTo("userReportForm");
            $("<input/>").attr("type", "hidden").attr("id","uEndDate").attr("name", "EndDate").attr("value", ed).appendTo("userReportForm");
            console.log($("#uStartDate").val());
            return false;
        });
    });
</script>

Однако, когда я нажимаю на кнопку, я не получаю значения для идентификатора uStartDate. На моей консоли оно выглядит пустым.

Возможно ли получить значение из этого ввода?

Я намерен передать StartDate и EndDate вместе с формой при отправке.

Answer 1

 $(document).ready(function () {
    var sd = $("#StartDate").val();
    var ed = $("#EndDate").val();
    $("#userReportGenerate").click(function (e) {
        e.preventDefault();
        let uStartDate='<input type="hidden" id="uStartDate" name="StartDate" value="'+sd+'">';
        $('#userReportForm').append(uStartDate); 
        return false;
    });
});