How to append html inside GET_ITO_PROJECTS_DASHBOARD_SP so all script

Question

I work on jQuery i have issue I can't append html inside jQuery script

SO jQuery function GET_ITO_PROJECTS_DASHBOARD_SP() will create all html scripts below

and i will remove html static and i will create all html at runtime within function

so exactly How to make function GET_ITO_PROJECTS_DASHBOARD_SP add html dynamic on function at run time .

so function will add and create html within it

so i will merge both html and jQuery inside function GET_ITO_PROJECTS_DASHBOARD_SP()

function GET_ITO_PROJECTS_DASHBOARD_SP() {
var P_OWENER_ORG_ID = $("#hiddenCompCivilNo").val();

var data = "{'P_OWENER_ORG_ID': '" + P_OWENER_ORG_ID +
    "'}";
$.ajax({
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: "../BusinessLayer/WebMethods.asmx/GET_ITO_PROJECTS_DASHBOARD_SP",
    data: data,
    dataType: "json",
  
    success: function (Result) {
            if (Result.d.Status == "1") {
        
                $("#gvResultSub").empty();
                $("#gvResultSub").html('<thead></thead><tbody></tbody>');
                var rowNo = 0;
                if (Result.d.P_PROJ_SUBMISSION_CUR != null) {
                    if (Result.d.P_PROJ_SUBMISSION_CUR.length > 0) {
        
                        $('.gvResultSub-container').show();
                     
                        for (var i in Result.d.P_PROJ_SUBMISSION_CUR) {

                            if (rowNo == 0) {
                                if (MYLang.ReturnLang() == "ar-KW") {
                                    $("#gvResultSub >thead").append("<tr class='card-info card-header text-white text-center'><th>?</th><th>??? ???????</th><th>??????? </th></tr>");
                                }  
                            }
                            var row = `<tr ${rowStyle} align='center' id='tr${Result.d.P_PROJ_SUBMISSION_CUR[i].PROJECT_NAME}' class='record'>
    <td class='tdCount'>${rowNo + 1}</td>
    <td>${Result.d.P_PROJ_SUBMISSION_CUR[i].PROJECT_NAME}</td>
    <td>${Result.d.P_PROJ_SUBMISSION_CUR[i].stageDate}</td>
</tr>`;
                            $("#gvResultSub > tbody").append(row);
                            rowNo++;
                        }
                    }
                }
                $("#gvResultClose").empty();
                $("#gvResultClose").html('<thead></thead><tbody></tbody>');
                var rowNo = 0;
                if (Result.d.P_PROJ_CLOSING_CUR != null) {
                    if (Result.d.P_PROJ_CLOSING_CUR.length > 0) {
                        $('.gvResultClose-container').show();
                        for (var i in Result.d.P_PROJ_CLOSING_CUR) {
                            if (rowNo == 0) {
                                if (MYLang.ReturnLang() == "ar-KW") {
                                    $("#gvResultClose >thead").append("<tr class='card-info card-header text-white text-center'><th>?</th><th>??? ???????</th><th>??????? </th></tr>");
                                }  
                            }
                            var row = `<tr ${rowStyle} align='center' id='tr${Result.d.P_PROJ_CLOSING_CUR[i].PROJECT_NAME}' class='record'>
    <td class='tdCount'>${rowNo + 1}</td>
    <td>${Result.d.P_PROJ_CLOSING_CUR[i].PROJECT_NAME}</td>
    <td>${Result.d.P_PROJ_SUBMISSION_CUR[i].stageDate}</td>
</tr>`;
                            $("#gvResultClose > tbody").append(row);
                            rowNo++;
                        }
                    }
                }
                    }
                }
      }
    }
    
});
}

 

html script i need to append it on jquery function
 

<div class="row">
    <div class="col-12">
        <div id="card-main_Index" class="card customCard card-outline-primary" style='background-color:rgba(255, 255, 255, 0.3);'>
   
                  <div class="card-header">
             <h4 class="m-b-0 text-white card-title text-center">
      
             </h4>
         </div>
         <div class="card-body">
             <div class="row">           
                 <div class="col-12 col-lg-1">
                        </div>
                    <div class="col-12 col-lg-5  gvResultSub-container hide">
                     <div class="form-group">
                           <div class="card card-outline-success">
                           <div style="background-color: #006400;font-size:18px;padding: .75rem 1.25rem;font-weight: 600;height: 50px;color: #ffffff;">
                                ?????
                             </div>
                             <div class="card-body">
                                 <table id="gvResultSub" class="table table-striped table-hover table-bordered">
                                     <thead>
                                     </thead>
                                     <tbody>
                                     </tbody>
                                 </table>
                             </div>
                         </div>
                     </div>
                 </div>
           
                 <div class="col-12 col-lg-5 gvResultClose-container hide">
                     <div class="form-group">
                         <div class="card card-outline-success">
                             
                                   <div class="card-header bg-danger text-light">
                                ???????
                             </div>
                             <div class="card-body">
                                 <table id="gvResultClose" class="table table-striped table-hover table-bordered">
                                     <thead>
                                     </thead>
                                     <tbody>
                                     </tbody>
                                 </table>
                             </div>
                         </div>
                     </div>
                 </div>
                 <div class="col-12 col-lg-1">
        
                 </div>
             </div>
             </div>
         </div>
     </div>
</div>