[java script] تكرار قيم ببيانات منفصلة

سلام عليكم 

لو فيه عنوان افضل يا ريت المشرف الفاضل يغيره مع الشكر

بعمل نظام مناقصات لعميل و الدنيا تمام الحمد لله بس فيه شئ واقف قدامي

من ضمن بيانات تسجيل المناقصة المستخدم بيختار عدد بنود التوريد

بعدها بيفتح له خانات يدخل فيها اسم البند و عدد بنود الحزم اللي هاتتسجل جوا البند ده

نفترض مثلا ان المستخدم قام باختيار 3 بنود توريد

يعني هاتتفتحلي 3 divs تحتوي على اسم بند التوريد و عدد الحزم التابعه لهذا البند تحديدا و زر هايقوم بفتح اماكن ادخال للمستخدم

كل بند توريد بداخله اسماء الحزم الخاصة به

الآن زر الاضافة لا يعمل سوى لبند توريد واحد فقط

الكود

  <div class="col-12 count2 " style="display: none">
        <div class=" has-success mb-4">
            <label class="required">عدد بنود التوريد </label>

            <div class="input-group">

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

                    <span class="input-group-text" id="inputGroupPrepend"><i class="fa fa-th"></i></span>

                </div>

                <input type="number" min="1" max="12" class="form-control pack1-count1" required>

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

                    <button type="button" class="btn btn-danger pack1">إضافة</button>

                </div>

            </div>

        </div>

    </div>

ثم كود السكربت

    $(".pack1").click(function () {

        let count = $(".pack1-count1").val();

        if (count>0){

            $(".supply-fields1").remove();

            var si_inputs = '';

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

                si_inputs += `
<div class="row mt-3 mb-4 supply-fields1 ">

        <div class="col-9">
            <div class=" has-success mb-4">
                <label class="label">أسم بند التوريد</label>
                <div class="input-group">
                    <input required type="text" class="form-control contact_person" >

                </div>
            </div>
        </div>

        <div class="col-2">
            <div class=" has-success mb-4">
                <label class="label">عدد الحزم المطلوبة</label>
                <div class="input-group">
                    <input required type="text" step="any" class="form-control pack2-count2">

                </div>
            </div>
        </div>

        <div class="col-1 mt-4">

            <button id="mo" type="button" class="btn btn-primary pack4">إضافة</button>

        </div>
    </div>`;

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

        }
//##########################################
$(".pack4").click(function () {

let count2 = $(".pack2-count2").val();

if (count2>0){

    $(".supply-fields2").remove();

    var si_inputs = '';

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

si_inputs += `
<div class="col-12  mb-2 mt-3 row d-flex align-items-center supply-fields2">

<label for="cc-payment" class="control-label mb-3 text-danger">إسم الحزمة</label>
<input type="text" name="supply_items" class="form-control supply_items"  >
</div>`;

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

}


});
//############################################
    });

فيديو توضيحي  Untitled Project.mp4