Multiple inputs with same name - html

Question

I have form, in it user can duplicate input forms, and I have a trouble with a radio buttons.
When I trying to use:
$('form').serialize();
In Chrome Dev Tools
I've got:
"text-field%5B%5D=%D0%98%D0%B2%D0%B0%D0%BD%D0%BE%D0%B2+%D0%98%D0%B2%D0%B0%D0%BD+%D0%98%D0%B2%D0%B0%D0%BD%D0%BE%D0%B2%D0%B8%D1%87&text-h-alignment%5B%5D=42&text-v-alignment%5B%5D=42&text-field%5B%5D=(000)+000+00+00&text-alignment%5B%5D=center& text-h-alignment%5B%5D=42&text-v-alignment%5B%5D=42"
As you can see, radio buttons are not in "array", it's an unique variable.
But I use the "[]" symbols at the end of variable name.
Here is my HTML:
<form>
<div class="row">
<div class="col-lg-4">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Шаблон <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Имя</li>
<li>Телефон</li>
<li>E-mail</li>
<li>Адрес</li>
<li>Сайт</li>
</ul>
</div>
<input type="text" class="form-control" name="text-field[]">
</div>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" checked="checked" name="text-alignment[]" value="left"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</label>
<label class="btn btn-default">
<input type="radio" name="text-alignment[]" value="center"><span class="glyphicon glyphicon-align-center" aria-hidden="true"></span>
</label>
<label class="btn btn-default">
<input type="radio" name="text-alignment[]" value="right"><span class="glyphicon glyphicon-align-right" aria-hidden="true"></span>
</label>
</div>
<div class="input-group spinner padding-15 pull-left">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span></span>
<input type="text" class="form-control" value="42" name="text-h-alignment[]">
<div class="input-group-btn-vertical">
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-chevron-up"></i></button>
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-chevron-down"></i></button>
</div>
</div>
<div class="input-group spinner padding-15 pull-left">
<span class="input-group-addon" id="basic-addon1"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span></span>
<input type="text" class="form-control" value="42" name="text-v-alignment[]">
<div class="input-group-btn-vertical">
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-chevron-up"></i>
</button>
<button class="btn btn-default" type="button"><i class="glyphicon glyphicon-chevron-down"></i>
</button>
</div>
</div>
</div>
<div class="row margin-top-15">
<div class="col-lg-4">
<a href="#" class="color-green" onclick="$(this).closest('.container-fluid').find('.row:eq(0)').clone().prependTo($(this).closest('.container-fluid form'))">
<div class="circle green-circle circle-position pull-left"><span class="glyphicon glyphicon glyphicon-plus color-white circle-plus" aria-hidden="true"></span> </div>Добавить еще поля</a>
</div>
</div>
</form>

Answer 1

I did not find a native solution in HTML.
Therefore it was necessary to use such a solution to the JS:
$(this).closest('.container-fluid').find('.row:eq(0)').clone(true).find('input[type=radio]').attr('name', function(i, val){return val.replace(/(\d+)/, function(n){ return ++n })});
As a result, when you click on "duplicate field", appears radio buttons with the names: text-alignment[1], text-alignment[2]...