JQuery find and closest Can't find closest input fields

Question

I loop through some data dynamically via Ajax and than display them in table. As you see I have multiple row or <tr> , HeaderLine and Customerinfo. which I'm interesting in is CustomerInfo and the thing I'm trying do is when button is clicked, check which input fields is Empty or has no value than give an alert and for finding input fields or elements I used jQuery find() and closest() Method, but for some reason it can't find any elements.

Can anyone please help me to solve the issue?

JavaScript for checking Empty input fields before sending to server:

<script>
    function AnmodomRMA(e) {

        var tr = $(e).closest("table").find(".CustomerInfo");
        var email = tr.find('input.Email').val();
        var telefon = tr.find('input.Telefonnummer').val();

        if (email === "") {
            alert("Input is Empty:" + email);
            return false;
        }
        if (telefon === "") {
            alert("Input is Empty:" + telefon);
            return false;
        }

        var formdata = $("select, textarea,input").serializeArray();

        $.ajax({
            "url": '@Url.Action("AutoRMAAnmoding", "User")',
            "method": "POST",
            "data": formdata,
            "dataType": "json",
            success: function (data) {
                console.log(data);
            },

            error: function () {
                console.log('something went wrong - debug it!');
            }

        });
    }
</script>

JavaScript for Load Data (dynamically into table):

<div class="card-body">
    <table class="table">
        <tbody id="ResultProduct"></tbody>

    </table>
        <div id="AppendBtnRMA">

        </div>

</div>

<script>
    $.ajax({
        type: "GET",
        url: "/User/serializeItemLineByID" + 1,
        dataType: 'json',
        success: function (result) {

            $.each(result.findclosedorders, function (ii, e) {
                var guid = uuidv4();

                rows += '<tr class="HeaderLine">';
                rows += '<td>some data</td>';
                rows += '</tr>';

                rows += '<tr class="CustomerInfo">'
                rows += '<input type="hidden" name="model.InsertRMALists.Index" value="' + guid + '" />';
                rows += '<td><label>Telefonnummer</label><input name="model.InsertRMALists[' + guid + '].Telefonnummer" id="Telefonnummer" type="tel"></td>';
                rows += '<td><label>E-mail</label><input name="model.InsertRMALists[' + guid + '].Email" id="Email" type="text"></td>';
                rows += '</tr>';

            });
            var btnAppend = "";
            btnAppend += '<button onclick="AnmodomRMA(this);">Create RMA</button>';

            $("#AppendBtnRMA").append(btnAppend);
            $("#ResultProduct").append(rows);
        },
    })
</script>

Answer 1

Thanks for all help :)

Here is how did i solve the problems:
- Add a class to input fields.
- beacuse button it was out side the table, i have to select closest element around table and than find <tr> like:

 var tr = $(e).closest(".card-body").find("tr.section");

and than loop through that element i want to check if it is Empty:

$(tr).each(function (i, el) {
            var t = $(el).find('input.Telefonnummer').val();
            if (t ==="") {
                alert("empty");

            }
        });

Answer 2

In the function AnmodomRMA(e) e refers to the event itself and not the clicked button, try to use e.target:

      var tr = $(e.target).closest("tr");