追加无法正常工作，也没有显示错误

Question

我正在尝试调用function。打开屏幕弹出窗口，但是它不显示弹出窗口，也不显示错误。function正在使用console.log正确调用尝试打印的详细信息。数据正常发送。我认为追加弹出框时会出现问题。请帮帮我。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
  function viewCamp(id) {
    $('#customModal').remove();
    listable = "<h1 style='text-align: center;'>Camp Details<h1>";
    $.get("camp-details-ajax.php?e2c=" + id, function(data) {
      obj = $.parseJSON(data);
      console.log(obj);
      listable += "<table style='text-align:left'>";
      listable += "<tr><th>Organization name</th><td>" + obj.CAMP_SCHOOL_NAME + "</td></tr>";
      listable += "<tr><th>Name of contact person</th><td>" + obj.CAMP_SCHOOL_PRINCIPAL_NAME + "</td></tr>";
      listable += "<tr><th>Mobile Number</th><td>" + obj.CAMP_SCHOOL_CONTACT_NUM + "</td></tr>";
      if (obj.CAMP_SCHOOL_LANDLINE != '' && obj.CAMP_SCHOOL_LANDLINE != null) {
        listable += "<tr><th>Landline Number</th><td>" + obj.CAMP_SCHOOL_STD_CODE + "-" + obj.CAMP_SCHOOL_LANDLINE + "</td></tr>";
      }
      listable += "<tr><th>Email</th><td>" + obj.CAMP_SCHOOL_EMAIL + "</td></tr>";
      listable += "<tr><th>Address1</th><td>" + obj.CAMP_SCHOOL_ADD1 + "</td></tr>";
      listable += "<tr><th>Address2</th><td>" + obj.CAMP_SCHOOL_ADD2 + "</td></tr>";
      if (obj.CAMP_SCHOOL_ADD3 != '' && obj.CAMP_SCHOOL_ADD3 != null) {
        listable += "<tr><th>Address3</th><td>" + obj.CAMP_SCHOOL_ADD3 + "</td></tr>";
      }
      listable += "<tr><th>City	</th><td>" + obj.CAMP_SCHOOL_CITY + "</td></tr>";
      listable += "<tr><th>State</th><td>" + obj.CAMP_SCHOOL_STATE + "</td></tr>";
      listable += "<tr><th>Pincode</th><td>" + obj.CAMP_SCHOOL_PIN + "</td></tr>";
      listable += "<tr><th>Doctor Name</th><td>" + obj.CAMP_TEMP_DENT_NAME + "</td></tr>";
      listable += "<tr><th>Doctor Email</th><td>" + obj.CAMP_TEMP_DENT_EMAIL + "</td></tr>";
      listable += "<tr><th>Doctor Mobile</th><td>" + obj.CAMP_TEMP_DENT_MOBILE + "</td></tr>";
      listable += "<tr><th>Strength of Whole School/Organization</th><td>" + obj.CAMP_NO_OF_STUDENT + "</td></tr>";
      listable += "<tr><th>Number of Students/Children attending</th><td>" + obj.CAMP_NO_OF_STU_ATTEND + "</td></tr>";
      listable += "</table>";
      $('body').append('  <div class="modal fade" id="customModal" role="dialog"><div class="modal-dialog"> <div class="modal-content"><div class="modal-body"><button type="button" class="close" data-dismiss="modal"><img src="images/close.png" class="img-responsive" width="100%"  ></button><p>' + listable + '</p></div></div></div></div>');
    });
  }
  $('body').on('click', '.close', function() {
    $('#customModal').remove();
  })
</script>