I have a modal that opens on a verification of email button. I am looking to transfer the selected info to the main page then close the modal.

the modal works fine and get the data, but it does not populate the input fields. Here is the modal code:

       <form id="get_customer">
            <input type="hidden" name="customer_Name" value="John Doe" id="customerName">
            <input type="hidden" name="customer_Email" value="[email protected]" id="customerEmail">
            <div class="md-form mb-3"> <h4 class="modal-title text-start"><h3>Customer Details</h3></div>
            <div class="modal-body">
              <div class="md-form col-md-12">
                <table style="width:100%;">
                <table style="width:100%;">
                  <tr>
                    <td style="color:#000000;font-size:15px; font-weight:bold;">Peter McGrath</td>
                  </tr>
                  <tr>
                    <td style="color:#000000;font-size:10px;padding-top:2em;"><select name="customers_email_address"  style="width:100%;max-width:90%;" onchange="show_customer_selected()" id="customer_select" ><option value="12546">John Doe
    ([email protected])</option><option value="48421">John Doe
    ([email protected])</option><option value="49709">John Doe
    ([email protected])</option><option value="48064">John Doe
    ([email protected])</option></select></td>
                  </tr>
                  <tr>
                    <td style="color:#000000;font-size:15px; font-weight:bold;padding-top:2em;">Customer Details</td>
                  </tr>
                  <tr>
                    <td style="color:#000000;font-size:15px; font-weight:bold;padding-top:2em;"><span id="show_details"><br>John Doe<br>[email protected]<br>109 here st Drive<br>Auston, Texas<br>USA<br>555-555-55555</span></td>
                  </tr>
                </table>
              </div>
                <div class="text-start col-md-12" style="padding-top:3em;">
                  <button type="button" class="btn btn-warning" data-bs-dismiss="modal">Close</button>
                  <input type="submit" class="btn btn-success" id="use_customer" value="Use Customer" >
                </div>
            </div>
        </form>
    <script>
    function show_customer_selected(){
            var customerDropDown = document.getElementById("customer_select");
            var customers_id = customerDropDown.value;
            $.ajax({
                url: "ajax_customer_details.php",
                method: "post",
                data: {customers_id},
                dataType: "html",
                success: function (result) {
                $("#show_details").html(result);
            },
            error: function(xhr, status, error) {
          }
         });
        }
    $(function() {
        $("#get_customer").on('submit',function(e){
            e.preventDefault();
            var customers_name = document.getElementById("customerName").value;
            var customers_email = document.getElementById("customerEmail").value;
            document.getElementById('customerEmail').value = 'test';
            document.getElementById('customerName').value = customers_name;
     
alert(customers_email + customers_name);    

$("#popModal").modal("hide");
        })
    });
    </script>

Here is the main doc fields I am trying to populate:

<div class="col-sm-2 text-start"><input type="text" name="customer_name" value=""  id="customerName" ></div>

<div class="col-sm-8 text-start"><input type="text" name="customers_email_address" value=""  id="customerEmail" ></div>

I can get the data in the modal, but it is not populating the main doc fields so that they are visible. Wondering if I am missing something here?