جلب بيانات من الداتابيز و عرضها بداخل bootstrap Modal ، يعمل على السيرفر الشخصي و لا يعمل على اللايف

سلام عليكم

سأشرح المشكلة بالصور بشكل واضح

بعد أن اقوم بإختيار البند المسمى بالاسورة مثلا و اشغط تفاصيل يفتح لي مودال به بيانات البند حسب ال ID 

الى الان انا على السيرفر الشخصي xampp ، لكن مجرد ما حبيت ارفع التحديث على اللايف

القايمة المنسدلة اللي بختار منها البند بتقرا من الداتابيز عادي جدا و جايبالي المتسجل جواها مفيش اي مشكلة

لكن المشكلة تحدث عند عرض التفاصيل فلا تظهر اي بيانات كما كانت تعمل على اللوكال سيرفر

الكود الخاص بي 

اولا كود سحب بيانات البند من الداتابيز و عرضها في قائمة منسدلة و تعريف المتغيرات بشكل واضح لكي يتم ربطها مع مودال التفاصيل علر jQuery

<div class="col-12 mb-3 row d-flex  bracelets-fields">

<div class="col-9" style="margin-bottom:20px">
<div class="h5 text-primary m7md1" style="margin-bottom:20px">اختيار الإسورة
</div>
<div class="input-group">
<select class="form-control  bracelets-value p-0" id="d_bracelet_${i+1}" style="margin-bottom:20px" required>

<option selected disabled>تحديد الإسورة</option>

<?php

$result = $conn->query("SELECT * FROM bracelet");

while ($row = $result->fetch_assoc()) {

$id = $row['id'];		
$name = $row['name'];
$fiber = $row['fiber'];

$uResult = $conn->query("SELECT * FROM fibers WHERE id='$fiber'");

while ($uRow = $uResult->fetch_assoc()) {

$fiber= $uRow['name'];

}

$height = $row['height'];
$width = $row['width'];
$pantone = $row['pantone'];
$degree = $row['degree'];
$size = $row['size'];
$weight = $row['weight'];
$des = $row['des'];
$factory = $row['factory'];
$price = $row['price'];
$image = $row['image'];
			

echo '<option class="text-success" type="bracelet"
id="' . $id . '"
height="' . $height . '"
width="' . $width . '"
fiber="' . $fiber . '"
pantone="' . $pantone . '"
degree="' . $degree . '"
size="' . $size . '"
weight="' . $weight . '"
des ="' . $des . '"
factory="' . $factory . '"
price="' . $price . '"

';

if (!empty($row['image'])){
	echo 'image="assets/images/bracelet/' . $image . '"';
}
else {
	echo ' image="assets/images/no-image.png" ';
}

if (!empty($row['name'])){
	echo '
name="' . $row['name'] . '"
value="' . $row['id'] . '">كود الإسورة : bracelet ' . $row['id'] . ' -- الإسم الشائع :- ' . $row['name'] . '</option>';
}

else {
	echo  '
	name="لا يوجد اسم مسجل"
	value="' . $row['id'] . '">كود الإسورة : bracelet ' . $row['id'] . ' -- لم يتم تسجيل إسم شائع لهذا الإسورة</option>';	
}



}

?>

</select>

</div>
</div>

<div class="col-3 pt-5">

<button type="button" class="btn btn-info get-cFabric"  data-toggle="modal" id="bracelet_${i+1}" data-target="#m8">تفاصيل</button>

</div>

و هذا الكود الخاص بتفاصيل العرض

<div class="modal fade" id="m8" tabindex="-1" role="dialog" aria-labelledby="colorModalTitle" aria-hidden="true">

<div class="modal-dialog modal-lg" role="document">

<div class="modal-content">

<div class="modal-header">

<h5 class="modal-title" id="colorModalTitle">عرض بيانات الإسورة</h5>

<button type="button" class="close" data-dismiss="modal" aria-label="Close">

<span aria-hidden="true">&times;</span>

</button>

</div>

<div class="main-card mb-3 card">

<div class="card-body">

<table class="align-middle mb-0 table table-borderless table-striped table-hover view-table" >

<thead>

<tr>

<th class="text-center bg-noha2 text-dark  border border-dark">الكود</th>

<th class="text-center bg-noha2 text-dark  border border-dark" colspan="3">الإسم الشائع</th>

</tr>

<tr>
<th class="text-center text-dark  border border-dark id"></th>


<th class="text-center text-dark  border border-dark name" colspan="3"></th>
</tr>

</thead>

<thead>

<tr class="">

<th class="text-center bg-noha2 text-dark  border border-dark">الطول</th>

<th class="text-center bg-noha2 text-dark  border border-dark">العرض</th>

<th style="text-align: center;" colspan="2" class="text-center bg-noha2 text-dark  border border-dark">الصورة</th>

</tr>

<tr>

<th class="text-center border border-dark height"></th>

<th class="text-center  border border-dark width"></th>

<th style="text-align: center;" align="center" rowspan="3" colspan="2" class=" border border-dark">

<img style="max-height: 100px !important; margin: 0 auto;" class="bracelet-image" src="" alt="#">

</th>


</tr>

<tr>

<th class="text-center bg-noha2 text-dark  border border-dark">درجة اللون</th>

<th class="text-center bg-noha2 text-dark  border border-dark">بانتون كود</th>

</tr>


<tr>

<th class="text-center  border border-dark degree"></th>

<th class="text-center  border border-dark pantone"></th>

</tr>

</thead>

<thead>

<tr>

<th class="text-center bg-noha2 text-dark  border border-dark">نوع الالياف</th>

<th class="text-center bg-noha2 text-dark  border border-dark">المقاس</th>

<th class="text-center bg-noha2 text-dark  border border-dark">الوزن</th>

<th class="text-center bg-noha2 text-dark  border border-dark">سعر الإسورة</th>

</tr>





<tr>

<th class="text-center  border border-dark fiber"></th>

<th class="text-center  border border-dark size"></th>

<th class="text-center  border border-dark  weight"></th>

<th class="text-center  border border-dark price"></th>

</tr>

</thead>


<thead>

<tr>

<th class="text-center bg-noha2 text-dark  border border-dark">إسم المورد</th>

<th class="text-center bg-noha2 text-dark  border border-dark" colspan="3" >الوصف</th>

</tr>





<tr>

<th class="text-center  border border-dark factory"></th>

<th class="text-center  border border-dark des" colspan="3" ></th>

</tr>

</thead>



</table>

</div>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-secondary closeX1" data-dismiss="modal">إغلاق</button>

</div>

</div>

</div>

</div>

و هذا كود الجافا سكربت المسئول عن تمرير المتغيرات و ارسالها للمودال

<script>
// Select the current button that called the cloth details modal
var currentBraceletModel = 0;
$('#m8').on('show.bs.modal', function (e) {

//var $modal = $(this);
currentBraceletModel = e.relatedTarget.id;

var selectedBracelet = $(`#d_${currentBraceletModel} option:selected`);

$(".view-table").show();

var 

id = selectedBracelet.attr("id"),

name = selectedBracelet.attr("name"),

fiber = selectedBracelet.attr("fiber"),

height = selectedBracelet.attr("height"),

width = selectedBracelet.attr("width"),

degree = selectedBracelet.attr("degree"),

pantone = selectedBracelet.attr("pantone"),

size = selectedBracelet.attr("size"),

weight = selectedBracelet.attr("weight"),

des = selectedBracelet.attr("des"),

factory = selectedBracelet.attr("factory"),

price = selectedBracelet.attr("price"),

image = selectedBracelet.attr("image");


$(".id").html(id);

$(".name").html(name);

$(".fiber").html(fiber);

$(".height").html(height);

$(".width").html(width);

$(".degree").html(degree);

$(".pantone").html(pantone);

$(".size").html(size);

$(".weight").html(weight);

$(".des").html(des);

$(".factory").html(factory);

$(".price").html(price);

$(".bracelet-image").attr("src",image);

});

</script>

السؤال ، لماذا تظهر التفاصيل على السيرفر الشخصي و لا تظهر على اللايف