Ajax response conflicting css - php

Question

I am displaying two functions in Modal head and Modal body using ajax.
Before sending ajax request the modal looks like this
After ajax response the modal looks like this
Where is the issue?
Cart.php
include('includes/Cart_code.php');
<?php
if (isset($_POST['ID'])) {
$cart_class = new cart_class($_POST['ID']);
$cart_class->cart_head_info_print();
$cart_class->cart_body_info_print();
exit();
}
?>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
type: "POST",
url: "Cart.php",
data: {"ID":id},
success: function(result){
$('#ajaxResult').html(result);
}
});
});
</script>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<img src="" class="showPic">
<div id="ajaxResult">
<div class="modal-header" style="padding:35px 50px;">
<button type="button" class="close" data-dismiss="modal">×</button>
<!---HERE HEADER DATA WILL BE DISPLAY---->
</div>
<div class="modal-body" style="padding:40px 50px;">
<!---HERE BODY DATA WILL BE DISPLAY---->
</div>
</div>
</div>
</div>
</div>

Answer 1

Please the take product name from ajax response and append to the header part like below,
success:function(data){
if(!data){$('#ajaxResult .modal-header').append(data);}
}
as the same append into corresponding div for description and all.
REF: How to return PHP variables on success AJAX/jQuery POST
Hope you will found the answer here.!!