How to not write jquery inside html? An alternative to write the append in pure javascript for this code?

Question

The code works perfectly with jquery append but its too much html inside jquery and it's slowin down the performance. can you guys tell me how to do it without html inside jquery but to optimize it in pure javascript. I have to append <li> inside <ul> after populating datas in front from modal submit.

Html:

     <ul class="select_div"></ul>

Jquery:

          $(function() {
        var count= 1;
        $('#btnSelect').click(function () {

               var append_div= '<li class="">' +
                '<div class="collapsible-header ">' +
                '<div class="col-md-8 p-0">' +
                '</div>' +
                '<div class="col-md-4 p-0">' +
                '</div>' +
                '</div>' +
                '<div class="collapsible-body pb-0">' +
                '<div class="row mb-0">' +
                '<div class="input-field col-md-6 col-sm-12 mt-3">' +
                '<input id="" type="text"  placeholder="" value="" class="validate custom-pt custom-mt" disabled>' +
                '<input type="hidden" name=""  value="">' +
                '<input type="hidden" name=""  value="">' +
                '<label for="doctor_name" class="ml-3 input-custom active">Name</label>\n' +
                '</div>' +
                '<div class="input-field col-md-6 col-sm-12 m-0">' +
                '<div class="form-group">' +
                '<label for="" class="m-0"></label>' +
                '<select class="select2" id="test'+count+'" name="" style="width:100%" multiple="multiple">' +
                '<option value=""></option>' +
                '<option value=""></option>' +
                '<option value=""></option>' +
                '<option value=""></option>' +
                ' </select>' +
                '<input type="hidden" name="">' +
                '</div>' +
                '</div>' +
                '<input id="" type="text"  placeholder="" name="" class="validate">' +
                '<label for="" class="ml-3 input-custom active">Profession</label>' +
                '</div>' +
                '</div>' +
                '<div class="row">' +
                '<div class="input-field col-md-3 col-sm-12 mt-3">' +
                ' <input id="" type="text"  placeholder="" value="" class="validate" disabled>' +
                '<input type="hidden" name=""  value="">' +
                '<label for="" class="ml-3 input-custom active">Phone</label>' +
                '</div>' +
                '<div class="input-field col-md-3 col-sm-12 mt-3">' +
                '<input id="" type="text"  placeholder="" value="" class="validate" disabled>' +
                '<input type="hidden" name=""  value="">' +
                '<label for="" class="ml-3 input-custom active">Mobile</label>' +
                '</div>' +
                ' <div class="input-field col-md-3 col-sm-12 mt-3">\n' +
                '<input id="" type="text"  placeholder="" value="" class="validate" disabled>' +
                '<input type="hidden" name=""  value="">' +
                '<label for="" class="ml-3 input-custom active">PHone 2</label>' +
                '</div>' +
                '<div class="input-field col-md-3 col-sm-12 mt-3">' +
                '<input id="" type="text"  placeholder="" value="" class="validate" disabled>' +
                '<input type="hidden" name=""  value="">' +
                '<label for="" class="ml-3 input-custom active">Email</label>' +
                '</div>' +
                '</div>' +
                '<div class="row">' +
                '<div class="input-field col-md-6 col-sm-12 mt-3">' +
                '<input id="" type="text" placeholder="" value="" class="validate" disabled>' +
                '<input type="hidden" name="" value="">' +
                '<label for="" class="ml-3 input-custom active">Number</label>' +
                '</div>' +
                ' <div class="input-field col-md-6 col-sm-12 mt-3">' +
                ' <input id="" type="text" placeholder="" value="" class="validate" disabled>' +
                '<input type="hidden" name=""  value="">' +
                ' <label for="" class="ml-3 input-custom active">City</label>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</li>';
                $('.select_div').append(append_doctor).show();
                count++;

Here I append <li> dynamically in <ul> but any alternative to not write html inside jquery please if you had other choices?