Append multiple values to a <table> with JavaScript

Question

I have a table in my MVC View.

Here is the HTML code:

<table class="table" >
    @{int rowNo = 0;}
    <tr>
        <td data-toggle="modal" data-target="#newAppointment" style="height: 40px; width: 40px; background: red;">
            <img style="object-fit: cover;" src='@Url.Content("~/Images/plus.png")'/>
        </td>
    </tr>
    <tr style="background: white">
        <th></th>
        <th style="font-size: 20px; text-align: center;color:#1d69b4;">
            Date of birth
        </th>
        <th style="font-size: 20px; text-align: center;color:#1d69b4;">
            Last Name
        </th>
        <th style="font-size: 20px; text-align: center;color:#1d69b4;">
            First Name
        </th>
        <th style="font-size: 20px; text-align: center;color:#1d69b4;">
            Kasse
        </th>
        <th style="font-size: 20px; text-align: center;color:#1d69b4;">
            Last visit
        </th>
        <th style="font-size: 20px; text-align: center;color:#1d69b4;">
            Last edit
        </th>
        <th></th>
    </tr>
    <tbody id="patients">
        @foreach (var item in Model)
        {
            <tr>
                <td class="point">
                    @(rowNo += 1)
                </td>
                <td class="title">
                    @Html.DisplayFor(modelItem => item.Date_of_Birthday)
                </td>
                <td class="title">
                    @Html.DisplayFor(modelItem => item.Last_name)
                </td>
                <td class="title">
                    @Html.DisplayFor(modelItem => item.First_name)
                </td>
            </tr>
        }
    </tbody>
</table>

I also have an AJAX script to append values to the table:

<script>
    $('#search').click(function () {
       $("#patients").empty();
       var lname = $("#lname").val();

        var model = {
            LastName: lname
        };

        $.ajax({
            url: '@Url.Action("ResultOfSearch", "PatientDatabase")',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify(model),
            type: 'POST',
            dataType: 'json',
            processData: false,
            success: function(data) {
                var list = data;
                //alert(list);
                var listnumber = 0;
                for (var i = 0; i <= list.length - 1; i++) {
                    var patientsList = ' <td class="point">' +
                        listnumber +
                        1 +
                        '</td>' +
                        '<td class="title"> ' +
                        list[i].dateOfBirthday +
                        '</td>' +
                        '<td class="title"> ' +
                        list[i].lastName +
                        '</td>' +
                        '<td class="title"> ' +
                        list[i].firstName +
                        '</td>';
                    $("#patients").append(patientsList);
                };
            }
        });
    });
</script>

It works well, but when I have more than one value, it appends in one row.

How can I append it correctly?

Answer 1

Append with tr

change the append code as below.

 $("#patients").append('<tr>'+patientsList+'</tr>');