Если делать так как я говорил, то <form
id="send" class="clearfix callback-form-container" action="{$form_action}" method="post"> - добавляем ID форме.
<option value="1.2"
/> - это неправильно, не должно быть тут слеша.
А вот если отправлять поля формы id="form", то тег этой формы заменить на тег DIV, а полям добавит атрибуты form="send". Но, чтобы эти поля отправились на сервер, они должны иметь имена, например список, это name="color[]", и соответственно name="width[]" и name="height[]" у полей ввода. ID у полей и списка удалить, так как они должны быть уникальны. Если ID эти используются в калькуляторе, то его код нужно переписать делегируя обработку общему родителю - id="form", так как поля добавляются.
Именование как name[], означает, что это элемент массива name. То есть сервер получит такой массив:
Код:
|
Array
(
[color] => Array
(
[0] => значение
[1] => значение
....
)
[width] => Array
(
[0] => значение
[1] => значение
....
)
[height] => Array
(
[0] => значение
[1] => значение
.....
)
) |
Это бутстрап, не знаю где кнопка добавить, тут для примера. Списку добавить опцию с пустым значением (если только Зеленый, это не значение по умолчанию).
<div id="form" >
<div class="roword">
<div class="col-md-3 col-sm-6 col-xs-12 form-col-1">
<select form="send" name="color[]">
<option value="">Выберите цвет</option>
<option value="1.2">Зеленый</option>
<option value="1.6">Синий</option>
<option value="1.8">Красный</option>
</select>
</div>
<div class="col-md-3 col-sm-6 col-xs-12 form-col-2">
<input form="send" type="number" step="1" name="width[]">
</div>
<div class="col-md-3 col-sm-6 col-xs-12 form-col-3">
<input form="send" type="number" name="height[]">
</div>
<div class="col-md-3 col-sm-6 col-xs-12 form-col-4">
<output></output>
</div>
</div>
</div>
<button>Add</button>
И обработчик:
$(function() {
$('button').click(function() {
$('div.roword').first().clone().appendTo($('#form')).find('select, input').val('')
})
});