Tengo un formulario que tiene tres cuadros y también tengo un btn debajo para la página de agregar.

Lo escribí de la siguiente manera, pero no quiero agregar más de dos casillas:

 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> `); })