How to group HTML from with multiple fields with same name

Question

I work on from to add more than one device when user click on add more But How can I group multiple fields with same name as array for every device from this form, my server side language is PHP.

<form>
<div class="row">
  <div class="col-md-12">
    <div class="widget stacked">
      <div class="widget-header">
        <i class="icon-hdd"></i>
        <h3>Remove Devices</h3> <a class="btn label label-success add_new_device">Add more</a>
      </div>
      <div class="widget-content">
        <div class="form-group">
          <label for="device_name">Device Name</label>
          <input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[device_name][]" type="text">
        </div>
        <div class="form-group">
          <label for="device_description">Device Description</label>
          <input class="form-control" data-validation="length" data-validation-length="max255" data-validation-optional="true" name="device[device_description][]" type="text">
        </div>
        <div class="form-group">
          <label for="device_url">Device Url</label>
          <input class="form-control" data-validation="url" data-validation-optional="true" data-validation-help="Ex: http://000.000.000.000/index.cgi" name="device[device_url][]" type="url">
        </div>
        <div class="form-group">
          <label for="device_ip4">IP4</label>
          <input class="form-control" data-validation="length" data-validation-length="max15" data-validation-optional="true" data-validation-help="Ex: 000.000.000.000" name="device[device_ip4][]" type="text">
        </div>
        <div class="form-group">
          <label for="device_ip6">IP6</label>
          <input class="form-control" data-validation="length" data-validation-length="max45" data-validation-help="Ex: 0000:0000:0000:0000:0000:0000" name="device[][device_ip6]" type="text">
        </div>
        <div class="form-group">
          <label for="device_username">Device Username</label>
          <input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[][device_username]" type="text">
        </div>
        <div class="form-group">
          <label for="device_password">Device Password</label>
          <input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[][device_password]" type="text">
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <div class="widget stacked">
      <div class="widget-header">
        <i class="icon-hdd"></i>
        <h3>Remove Devices</h3> <a class="btn label label-success add_new_device">Add more</a>
      </div>
      <div class="widget-content">
        <div class="form-group">
          <label for="device_name">Device Name</label>
          <input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[device_name][]" type="text">
        </div>
        <div class="form-group">
          <label for="device_description">Device Description</label>
          <input class="form-control" data-validation="length" data-validation-length="max255" data-validation-optional="true" name="device[device_description][]" type="text">
        </div>
        <div class="form-group">
          <label for="device_url">Device Url</label>
          <input class="form-control" data-validation="url" data-validation-optional="true" data-validation-help="Ex: http://000.000.000.000/index.cgi" name="device[device_url][]" type="url">
        </div>
        <div class="form-group">
          <label for="device_ip4">IP4</label>
          <input class="form-control" data-validation="length" data-validation-length="max15" data-validation-optional="true" data-validation-help="Ex: 000.000.000.000" name="device[device_ip4][]" type="text">
        </div>
        <div class="form-group">
          <label for="device_ip6">IP6</label>
          <input class="form-control" data-validation="length" data-validation-length="max45" data-validation-help="Ex: 0000:0000:0000:0000:0000:0000" name="device[][device_ip6]" type="text">
        </div>
        <div class="form-group">
          <label for="device_username">Device Username</label>
          <input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[][device_username]" type="text">
        </div>
        <div class="form-group">
          <label for="device_password">Device Password</label>
          <input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[][device_password]" type="text">
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-12">
    <div class="widget stacked">
      <div class="widget-header">
        <i class="icon-hdd"></i>
        <h3>Remove Devices</h3> <a class="btn label label-success add_new_device">Add more</a>
      </div>
      <div class="widget-content">
        <div class="form-group">
          <label for="device_name">Device Name</label>
          <input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[device_name][]" type="text">
        </div>
        <div class="form-group">
          <label for="device_description">Device Description</label>
          <input class="form-control" data-validation="length" data-validation-length="max255" data-validation-optional="true" name="device[device_description][]" type="text">
        </div>
        <div class="form-group">
          <label for="device_url">Device Url</label>
          <input class="form-control" data-validation="url" data-validation-optional="true" data-validation-help="Ex: http://000.000.000.000/index.cgi" name="device[device_url][]" type="url">
        </div>
        <div class="form-group">
          <label for="device_ip4">IP4</label>
          <input class="form-control" data-validation="length" data-validation-length="max15" data-validation-optional="true" data-validation-help="Ex: 000.000.000.000" name="device[device_ip4][]" type="text">
        </div>
        <div class="form-group">
          <label for="device_ip6">IP6</label>
          <input class="form-control" data-validation="length" data-validation-length="max45" data-validation-help="Ex: 0000:0000:0000:0000:0000:0000" name="device[][device_ip6]" type="text">
        </div>
        <div class="form-group">
          <label for="device_username">Device Username</label>
          <input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[][device_username]" type="text">
        </div>
        <div class="form-group">
          <label for="device_password">Device Password</label>
          <input class="form-control" data-validation="length" data-validation-length="max128" data-validation-optional="true" name="device[][device_password]" type="text">
        </div>
      </div>
    </div>
  </div>
</div>
</form>

Answer 1

Name your fields like devices[0][description], devices[1][description] and so on.

If every object has the exact same number of fields and every one is a new record - you can use devices[][description] and browser will fill indexes for you, but this can lead to bugs in the future, if you decide to use same form for editing records.

Also see How to get form input array into PHP array