I have this form:
<form role="form" action="/my/order/create" method="POST">
<input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/>
<div class="form-group product_select" id="product_select">
<label for="customer_phone" class="control-label">انتخاب محصول</label>
<select name="product_0" id="product_select">
<t t-foreach="products" t-as="product">
<option t-att-value="product.id" t-field="product.name"/>
</t>
</select>
<label for="quantity">تعداد</label>
<input type="number" id="quantity" name="quantity_0"/>
</div>
</form>
I want to create a button which by clicking it the div tag (and its content) should be duplicated but select tag name should be 'product_select_2" and its below input tag name should be "quantity_2". (also by clicking the button another time they should be "product_select_3" and "quantity_3")
can you give me the code in JQuery or JS? thanks in advance!