Please show me how to put the result of jQuery List into Table/Div(("AttachmentDiv2").innerHTML) Columns ?

Question

I have jQuery results that I wanted to put into a Div row in the HTML razor view.

such that when the "Select Receivable Note" is clicked it populate a modal with the payment related to the client selected.

The Razor view is pasted below

                <div class="form-group">  
                    @Html.LabelFor(model => model.Account_ClientReceipt.ClientCode, htmlAttributes: new { @class = "control-label col-md-2" })  
                    <div class="col-md-10">  
                        <div data-tip="Please select Client">  
                            @Html.DropDownList("Account_ClientReceipt.ClientCode", new SelectList(Html.ClientCodeDropDownList(), "ClientCode", "FullDescription", Model.Account_ClientReceipt.ClientCode), new { id = "Account_ClientReceipt.ClientCode", @class = "form-control input-sm" })  
                            @Html.ValidationMessageFor(model => model.Account_ClientReceipt.ClientCode, "", new { @class = "text-danger" })  
                        </div>  
                    </div>  
                </div>  

                <div class="form-group">  
                    <div class="col-md-offset-2 col-md-10">  
                        <button type="button" class="btn btn-primary" onclick="ShowDebitNoteDialog(this, 'Account_ClientReceipt.ClientCode');">Select Receivable Note</button>  
                        <a href="#dialog3" class="btn btn-primary" title="Confirm Setup" data-toggle="modal" onclick="dialog3();">Submit</a>  
                    </div>  
                </div>  

jQuery Script is Pasted below:

  var alreadyCalled = false;  
        var lastClientId = '';       
    var rootUrl = "@Helper.GetRootURL()";  
            var fetchUrl = rootUrl + "/Underwriting/LoadReceivableNoteList/" + selected + "?" + new Date().getTime();  
            if (lastClientId != selected || alreadyCalled == false) {  

                document.getElementById("AttachmentDiv2").innerHTML = "Loading receivable note list. Please wait...";  
                $.getJSON(fetchUrl,  
                function (result) {  
                    document.getElementById("AttachmentDiv2").innerHTML = "";  
                    removeOptions(document.getElementById("ReceivableNoteDropDownList"));  
                    $.each(result, function (i, option) {  
                        $('#ReceivableNoteDropDownList').append($('<option/>').attr("value", option.AccountReceivableCode).text(option.AccountReceivableCode));  
                        $('#ReceivableNoteDropDownList').append($('<option/>').attr("value", option.TransDate).text(option.TransDate));  
                        $('#ReceivableNoteDropDownList').append($('<option/>').attr("value", option.GrossAmount).text(option.GrossAmount));  
                    });  
                    alreadyCalled = true;  
                    lastClientId = selected;  
                })  
                .fail(function (jqXHR, textStatus, errorThrown) {  
                    if (jqXHR.status === 401) {  
                        window.location.href = jqXHR.Data.LogOnUrl;  
                        return;  
                    }  
                    else {  
                        BootstrapDialog.alert(jqXHR.responseText);  
                    }  
                });  
            }  

InnerHTML Modal where the result should appear is pasted below

    <div class="row">  
                <div class="col-md-12 col-sm-8 col-xs-12 col-xs-offset-0">  
                    <div id="dialog2" tabindex="-1" role="dialog" aria-labelledby="dialog2Label" aria-hidden="true" class="modal fade">  
                        <div class="modal-dialog">  
                            <div class="modal-content">  
                                <div class="modal-header">  
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>  
                                    <h4 class="modal-title" id="dialog2Label">Receivable Note List</h4>  
                                </div>  
                                <div class="modal-body">  
                                    <input type="hidden" name="SelectedDebitNoteID" id="SelectedDebitNoteID" value="@ViewBag.DebitNoteID" />  
                                     <div id="AttachmentDiv">  
                                        <div id="AttachmentDiv2"></div>  
                                        <p>  
                                            Receivable Notes:   <select id="ReceivableNoteDropDownList" class="form-control" onchange="setReceivedNote(this);"></select>  
                                        </p>  
                                    </div>  
                                </div>  
                                <div class="modal-footer">  
                                    <button type="button" class="btn btn-primary" data-dismiss="modal">Next</button>  
                                </div>  
                            </div>  
                        </div>  
                    </div>  
                </div>  
            </div>  

the current result is attached below:

From the above:

1. The date is not well displayed. I want the date to be formatted to "dd/mm/yyyy"
2. 2 rows are expected in the order below
   Ref_Note Date Amount
   AR0000000002 15/10/2022 125,000.00
   AR0000000004 15/10/2022 384,575.48

3) Why is my date in the above attachment not showing correctly as the expected result in the attached result below?

4) What do I do wrong in achieving the above-attached result output?

Thank you for your anticipated urgent assistance,

Best regards,

Abiodun

Answer 1

Select options are just one text, they do not support table layout. You are adding each column value as a separate option.

You can use a monospaced font and format the text with spaces, or use a JavaScript based component that supports column beaded pick lists.