how to return same inputs on the same razor page from onclick button

I am working on a form using razor pages and c# and when the user types a tag number it searches a sql database. if it finds the tag number in the database it fills in the input fields from the what's in the data base. this is triggered buy the search button.Then what I then want it to do is return the AssetTag, buildingOptions ,Description feilds and search button below the one that has the populated data in it.when the search button is clicked

here is my cshtml code:

@page
@model Surplus.Pages.FormItems.NewSurplusFormPageModel
<!DOCTYPE html>
<html>
<head>
    <title>Surplus Form</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-..." crossorigin="anonymous">
</head>
<body>
    <center><h1>@Model.WelcomeMessage</h1></center>

    <div class="container">
        <form method="post" id="surplusForm">
            <div class="mb-3">
                <input type="text" class="form-control" id="assetTag" asp-for="AssetTag" placeholder="Enter CPS Tag Number" />
            </div>
            <div class="mb-3">
                <select class="form-control" id="building" asp-for="Building" placeholder="Select Building">
                    <option value="">Select Building</option>
                    @foreach (var buildingOption in Model.BuildingOptions)
                    {
                        <option value="@buildingOption">@buildingOption</option>
                    }
                </select>
            </div>
            <div class="mb-3">
                <input type="text" class="form-control" id="description" asp-for="Description" placeholder="Enter Item Name" />
            </div>
            <div class="mb-3">
                <select class="form-control" id="reason" asp-for="Reason" placeholder="Select Reason">
                    <option value="">Select Reason</option>
                    @foreach (var reasonOption in Model.ReasonOptions)
                    {
                        <option value="@reasonOption.CodeID">@reasonOption.ReasonDescription</option>
                    }
                </select>
            </div>

            <div class="mb-3">
                <button type="button" id="searchButton" class="btn btn-primary form-control">Search</button>
            </div>
            <button type="submit" class="btn btn-primary form-control">Submit</button>
        </form>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#searchButton').on('click', function () {
                var formData = $('#surplusForm').serialize();

                $.ajax({
                    url: '?handler=InputFields',
                    data: formData,
                    method: 'GET',
                    success: function (result) {
                        // Handle the result or remove this section if not needed
                    },
                    error: function (xhr, status, error) {
                        console.error(error);
                    }
                });
            });
        });
    </script>
</body>
</html>

Thanks again for all the help in advance!!!!!!

Solution

here is the updated working code:

@page
@model Surplus.Pages.FormItems.NewSurplusFormPageModel
<!DOCTYPE html>
<html>
<head>
    <title>Surplus Form</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-..." crossorigin="anonymous">
</head>
<body>
    <center><h1>@Model.WelcomeMessage</h1></center>

    <div class="container">
        <table class="table table-responsive">
            <tr>
                <td><input type="text" class="form-control" id="assetTag" asp-for="AssetTag" placeholder="Enter CPS Tag Number" /></td>
            </tr>
            <tr>
    
                <td>
                    <select class="form-control" id="building" asp-for="Building" placeholder="Select Building">
                        <option value="">Select Building</option>
                        @foreach (var buildingOption in Model.BuildingOptions)
                        {
                            <option value="@buildingOption">@buildingOption</option>
                        }
                    </select>
                </td>
            </tr>
            <tr>
                <td><input type="text" class="form-control" id="description" asp-for="Description" placeholder="Enter Item Name" /></td>
            </tr>
            <tr>
                <td>
                    <select class="form-control" id="reason" asp-for="Reason" placeholder="Select Reason">
                        <option value="">Select Reason</option>
                        @foreach (var reasonOption in Model.ReasonOptions)
                        {
                            <option value="@reasonOption.CodeID">@reasonOption.ReasonDescription</option>
                        }
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <button onclick="copy(this)" type="button" id="searchButton" class="btn btn-primary form-control">Search</button>
                </td>
            </tr>
        </table>
    </div>

    <div class="container">
        <button type="submit" class="btn btn-primary form-control">Submit</button>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     // this script does what I was needing help with 
    <script>
        function copy(t) {
            var clonedForm = $(t).closest('table').clone();
            $(t).closest('.container').append(clonedForm);

            // Clear the cloned form fields
            clonedForm.find('input').val('');
            clonedForm.find('select').prop('selectedIndex', 0);
        }
    </script>


</body>
</html>

copies the fields and pastes them under the current table and then clears the forms!!!! I was just trying to explain it wrong! thank you to everyone who tried to help me out! :)