افزودن باکس با جاوا اسکریپت

باید با createElement و appendChild این کارو انجام بدی. برای محدود کردنش هم باید یه if و یه متغیر قرار بدی
مثلا یه a داریم بهش آیدی btn و میخوایم وقتی روش کلیک شد اون div ها اضافه بشن به form و به خود فرم آیدی form دادیم.
اگه منظورت اینکه با هر کلیک یه div اضافه بشه:

const btn = document.getElementById('btn');
const form = document.getElementById('form');
const div = document.createElement('div');
var createdBoxes = 0;
btn.addEventListener('click', function(e){
    if(createdBoxes < 2){
        form.appendChild(div);
        createdBoxes++;
    }
    e.preventDefault();
});

اگه قرار با یه کلیک دو تا باکس اضافه بشه:

const btn = document.getElementById('btn');
const form = document.getElementById('form');
const div = document.createElement('div');
var clicked = false;
btn.addEventListener('click', function(e){
    if(! clicked){
        form.appendChild(div);
        form.appendChild(div);
        clicked = true;
    }
    e.preventDefault();
});

رو تگ a هم preventDefault اعمال کردیم تا مثل لینک عمل نکنه
آموزش document.createElement
آموزش preventDefault

داداش این دایو که نوشتم مثال بود ولی شما در نظر داشته باش این دایو ها استایل و محتوای خاصی دارن اونارو چیکار کنم چطوری نمایش بدم ؟

استایل کلی اینطوریه :

<div class="mat-box">
                            <div class="mat-box-top">
                                <a href="#" class="mat-btn" onclick="toggle()"><span>مواد</span></a>
                                <a href="#" class="rounded-red" onclick="del()"><i class="fa fa-multiply"></i></a>
                            </div>
                            <div class="mat-box-body">
                                <input class="mat-equal sum1" type="text" name="sum_1" id="matvalue" placeholder="0">
                                <div class="rounded-green"><i class="fa fa-equals"></i></div>
                                <input class="mat-price price1" onchange="sum()" type="text" name="price_1"
                                    id="matvalue" placeholder="مقدار تومان">
                                <div class="rounded-green"><i class="fa fa-plus"></i></div>
                                <input class="mat-kg kg1" type="text" name="kg_1" id="matvalue" placeholder="KGمقدار">
                                <div class="divide"><span>0%</span></div>
                            </div>
                        </div>

در این صورت باید به Div قبل اینکه Append کنی به فرم InnerHTML بدی. و با classList.Add به div class رو اضافه کنی.
کد قبلی رو با این کد جایگزین کن

const btn = document.getElementById('btn');
const form = document.getElementById('form');
const div = document.createElement('div');
div.classList.add('mat-box');
div.innerHTMl = '
                            <div class="mat-box-top">
                                <a href="#" class="mat-btn" onclick="toggle()"><span>مواد</span></a>
                                <a href="#" class="rounded-red" onclick="del()"><i class="fa fa-multiply"></i></a>
                            </div>
                            <div class="mat-box-body">
                                <input class="mat-equal sum1" type="text" name="sum_1" id="matvalue" placeholder="0">
                                <div class="rounded-green"><i class="fa fa-equals"></i></div>
                                <input class="mat-price price1" onchange="sum()" type="text" name="price_1"
                                    id="matvalue" placeholder="مقدار تومان">
                                <div class="rounded-green"><i class="fa fa-plus"></i></div>
                                <input class="mat-kg kg1" type="text" name="kg_1" id="matvalue" placeholder="KGمقدار">
                                <div class="divide"><span>0%</span></div>
                            </div>
                        ';
var clicked = false;
btn.addEventListener('click', function(e){
    if(! clicked){
        form.appendChild(div);
        form.appendChild(div);
        clicked = true;
    }
    e.preventDefault();
});

inner html ارور داره

متن ارور و کد js رو بفرست

سینتکسش ارور میده فکر کنم بخاطر اینکه چند خطی میشه تو inner html

داداش میتونی ایدی تلگرامتو برام بفرستی ؟

لطفا به این ایمیل کد ها رو بفرست:

asp.gosk(at)gmail.com
// (at) رو با @ جایگزین کن

ایدی گیت هاب بده اد میکنم راحت تره

آیدی گیت هاب: tsinaa

تو پروژه اد کردم درخواست ارسال شد به ایمیل

میشه لطفا سریع برسیش کنی چون وقت زیادی ندارم