كيفية تحديث محتوى جدول (عدة حقول) وربط القيم بين الجداول للسماح بتعديلها php mysql

سلام عليكم و رحمة الله

الان عندي صفحة اضافة بيانات طباعة و نوع من الانواع يتتطلب له ادخال عدد الوان كما في الصورة

لما المستخدم بيختار لونين مثلا ، خليت السيتيم يفتحله خانات لادخال البيانات بالعدد اللي اختاره 

و ده الكود بتاعها

$(".colors-count-btn").on('click',function () {  

var count = $(".colors-count").val();

if (count>0){

$(".co").remove();

var col_inputs = '';

for (i=0 ; i<count ; i++) {

col_inputs += `

<div class="col-6 co">

<label class="text-danger">درجة اللون رقم: ${i+1}</label>

<div class="input-group">

<div class="input-group-prepend">

<span class="input-group-text prev-deg borders border-DarkBlood" id="inputGroupPrepend"><i class="metismenu-icon pe-7s-drop"></i></span>

</div>

<input type="text" id="d_degree_${i}" class="form-control degree-code bg-liteRose borderd border-DarkBlood"  required>

<div class="input-group-append">

<button type="button" data-toggle="modal" data-target="#colorModal" id="degree_${i}" data-id="degree_${i}" class="btn btn-DarkBlood color-degree">إستخرج اللون</button>

</div>

</div>

</div>

<div class="col-6 co">

<label class="text-danger">بانتون كود رقم: ${i+1}</label>

<div class="input-group">

<div class="input-group-prepend">

<span class="input-group-text prev-pant borderd border-DarkBlood" id="inputGroupPrepend"><i class="metismenu-icon pe-7s-drop "></i></span>

</div>

<input type="text" class="form-control panton-code bg-liteRose borderd border-DarkBlood" id="p_degree_${i}" required>


</div>

</div>
`;

}
$(this).parent().parent().parent().after(col_inputs);

colorsStatus = true;

}


//console.log($(".color-degree"));

})

خانة اللون زي محضراتكم شايفين اسمها ( degree-code ) و خانة البانتون اسمها ( panton-code)

الخطوة التانية : - مررت البيانات دي في ال jQuery ajax كالتالي 

var colors = [];

if (id == "سلك سكرين"){

var degreeColors = $(".degree-code"); // تعريف اللون
var pantoneColors = $(".panton-code"); // تعريف البانتون


for(var i = 0; i < degreeColors.length; i++){
colors[i] = [];
colors[i].push($(degreeColors[i]).val());
colors[i].push($(pantoneColors[i]).val());
}

}

var colorsJSON =  JSON.stringify(colors);

var form_data = new FormData();
form_data.append('colors', colorsJSON);

و جيت في الباك ايند دخلتها للداتابيز كالتالي

<?php   

// ----- define variables -----------

    $name = $_POST['name'];

	$stat = $_POST['stat'];

    $colors = json_decode($_POST["colors"]);

    $des = $_POST['des'];
#----------------------------------

// ----- ادخال البيانات العادية الرئيسية ------------

 $result = $conn->query("INSERT INTO print(CommonName, stat, des) VALUES ('$name','$stat','$des')");
// ------- اذا تم ادخال البيانات الرئيسيه بنجاح - ادخل لي الالوان كمصفوفة ---------

    if ($result) {

        if (sizeof($colors) != 0){

            $last_id = $conn->insert_id;
            $query = "INSERT INTO print_colors (print_id, degree, panton) VALUES ";

            foreach ($colors as $k => $color){

                $query.= "('$last_id','$color[0]','$color[1]')";

                if ($k !== sizeof($colors) -1) {
                    $query .= ',';
                } else {
                    $query .= ';';
                }

            }

            $result = $conn->query($query);


        }

        if ($result){
            echo "done";
        }
        else{
            echo "Error: " .  "<br>" . $conn->error;

        }


    } else {

        echo "Error: " . "<br>" . $conn->error;
    }

}

لحد كده الدنيا تمام جدا و البيانات ممتازة و دي من صفحة ال edit بعد ما جبت البيانات من الداتابيز

و جبت البيانات كالتالي

<?php

$query1 = "SELECT * FROM `print_colors` WHERE print_colors.print_id =".$id.";";  // الاستعلام
$result = $conn->query($query1);
?>

<!-- If Print type is silk Screen - Display Colors -->

    <?php
    if ($user['stat'] == 'سلك سكرين'){
        foreach ($result as $row){
    ?>

<div class="col-6 co">

<label class="text-danger">درجة اللون رقم: <?php echo $i; ?></label>

<div class="input-group">

<div class="input-group-prepend">

<span class="input-group-text prev-deg borders border-DarkBlood" id="inputGroupPrepend"><i class="metismenu-icon pe-7s-drop"></i></span>

</div>

<input type="text" id="d_degree_${i}" class="form-control degree-code bg-liteRose borderd border-DarkBlood"  value ='<?php echo $row['degree']; ?>' >

<div class="input-group-append">

<button type="button" data-toggle="modal" data-target="#colorModal" id="degree_${i}" data-id="degree_${i}" class="btn btn-DarkBlood color-degree">إستخرج اللون</button>

</div>

</div>

</div>

    <div class="col-6 co">

        <label class="text-danger">بانتون كود رقم: <?php echo $i++; ?></label>

        <div class="input-group">

            <div class="input-group-prepend">

                <span class="input-group-text prev-pant borderd border-DarkBlood" id="inputGroupPrepend"><i class="metismenu-icon pe-7s-drop "></i></span>

            </div>

            <input type="text" class="form-control panton-code bg-liteRose borderd border-DarkBlood" id="p_degree_${i}" value="<?php echo $row['panton']; ?>">


        </div>

    </div>
<?php }} ?>

الان انا عاوز المستخدم يعدل براحته على الالوان اللي ظاهرة دي ، و ادخل التغيير المطلوب في قاعدة البيانات بسهولة 

امر update لما نفذته جوا ال foreach ما زبطش معايا نهائي

ازاي اقدر اعمل update لمصفوفة الالوان دي ، مع الشكر