Complete URL from input and parse response

I try to write (sorry for my bad english)

HTML

<div>
<input type="tel" id="id" class="form-control" required="" placeholder="Masukkan UserID"  oninput="this.value=this.value.replace(/[^0-9.]/g, &#39;&#39;).replace(/(..*)./g, &#39;$1&#39;); myFunction()" name="id"></div>
<input type="tel" id="server" class="form-control" required="" placeholder="Masukkan Server"  oninput="this.value=this.value.replace(/[^0-9.]/g, &#39;&#39;).replace(/(..*)./g, &#39;$1&#39;); myFunction()" maxlength="5" name="server">
</div>
<div form-control" id="getnick"></div>
<div><button class="btn btn-outline-warning text-light" id="submit" name="submit" type="button" style="padding: 0;padding-top: 10px;padding-bottom: 10px;font-weight: bold;" data-bs-target="#summary" data-bs-toggle="modal">Beli Sekarang</button></div>
<div class="modal fade" role="dialog" tabindex="-1" id="summary">
     <div class="modal-dialog modal-dialog-centered" role="document">
     <div class="modal-content">
     <div class="modal-header" style="border-width: 0px;background: var(--bs-gray-dark);">
     <h4 class="modal-title" style="color: var(--bs-white);">Detail Pemesanan</h4>
     </div>
     <div class="modal-body" style="background: var(--bs-gray);">
     <div id="text-info"></div>
     <div class="form-control">
     <div>
     <table class="table table-borderless">
     <tbody>
     <tr style="border-bottom-width: 1px;border-bottom-color: var(--bs-gray-500);">
     <td>ID (Server)</td>
     <td width="3px">:</td>
     <td id="info-1"></td>
     </tr>
     <tr style="border-bottom-width: 1px;border-bottom-color: var(--bs-gray-500);">
     <td>Nickname</td>
     <td width="3px">:</td>
     <td id="info-2"></td>
     </tr>
     </tbody>
     </table>
     </div>
     </div>
</div>

JSON result from API https://xxxx.com/trueid/mobilelegends/?id=document.getElementById(“id”).value;&zone=document.getElementById(“server”).value;&token=yyyyy

{
    "result": {
        "status": "200",
        "Author": "Nguyen Thu Wan"
    },
    "nickname": "Yepe vs Everybody",
    "userid": "105740419"
}

JS

$("#submit").click(function () {
var id = $("#id").val();
var server = $("#server").val();
var nick = $("#getnick").val();

    
var str1   = id + " ( " + server + " ) ";
var str2   = nick;

    
$("#info-1").html(str1);
$("#info-2").html(str2);

    });

So, first..
i want to complete API’s url with input form #id and #server when it write to form.

second,
i want to display response of API “nickname” value on div #getnick

third
when submit button clicked, will appear modal that contain id, server, and nickname from API response

Thanks before