I have a form it has three boxes also I have a btn under it for the add page.

I wrote it as follows, but I do not want to add more than two boxes:

let matForm = document.querySelector('.mat-form');

document.querySelector('.btn-add-area').addEventListener('click', () => {
        matForm.insertAdjacentElement("beforeend", `
        
        <div class="mat-box">
        <div class="mat-box-top">
            <a href="#" class="mat-btn" onclick="toggle()"><span>مواد</span></a>
            <a href="#" class="rounded-red"><i class="fa fa-multiply"></i></a>
        </div>
        <div class="mat-box-body">
            <input class="mat-equal sum3" type="text" name="sum_2" id="matvalue" placeholder="0">
            <div class="rounded-green"><i class="fa fa-equals"></i></div>
            <input class="mat-price price3" onchange="sumThree()" type="text" name="price_2"
                id="matvalue" placeholder="مقدار تومان">
            <div class="rounded-green"><i class="fa fa-plus"></i></div>
            <input class="mat-kg kg3" type="text" name="kg_2" id="matvalue" placeholder="KGمقدار">
            <div class="divide"><span>0%</span></div>
        </div>
        </div>
    
        `);
})