Array of HTML radio button

Question

I have an add contact form with dynamically added radio buttons and input fields for the contact info:

<tr>
<td><input class="case" type="checkbox"/></td>
<td style="text-align: center"><input type="radio" value="1"  name="contact[principal][]" id="contact_1" class="icheck" @if( $contact->principal == 1) checked @endif>                                                                    </td>
<td><input type="text" value="{{ $contact->name }}" data-type="ItemName" name="contact[name][]" id="name_1" class="form-control autocomplete_txt" autocomplete="off"></td>
<td><input type="text" value="{{ $contact->position }}" name="contact[position][]" id="position_1" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>
<td><input type="text" value="{{ $contact->phone }}" data-mask="phone-ext" name="contact[phone][]" id="tel_1" class="form-control changesNo" autocomplete="off"  ondrop="return false;" onpaste="return false;"></td>
<td><input type="email" value="{{ $contact->email }}" name="contact[email][]" id="email_1" class="form-control changesNo" autocomplete="off"  ondrop="return false;" onpaste="return false;"></td>
</tr>

Here is a: https://jsfiddle.net/66y6dtx0/

Only one contact can be the principal and this is an example of what i receive from POST:

[contact] => Array
    (
        [name] => Array
            (
                [0] => Jane Emerson
                [1] => Jhon Doe
            )

        [position] => Array
            (
                [0] => Gerente
                [1] => CEO
            )

        [phone] => Array
            (
                [0] => (888) 878-3969
                [1] => (888) 578-8919
            )

        [email] => Array
            (
                [0] => jhon.e@gmail.com
                [1] => jhon@example.org
            )

        [principal] => Array
            (
                [0] => 1
            )

    )

The problem is that when there are more than one contact, the index doesn't match the contact being selected as principal.

How can i fix this?

Im using the Laravel framework is that helps.

Answer 1

My solution to this problem:

I added the row index using jquery to the name of the radio button and used jquery to deselect the others radio buttons with the help of this post:

radio different names - only check one

Im still curious if there is a better solution.