Add group fields name in dynamically generated fields

Question

I am trying to add group in input text in dynamically generated fields using jquery.

I want form to be like this here data in clnbox generates via jquery.

<form name="frm" method="post" action"">
    First-name:<input type="text" name="firstname" >   
    <div class="cust_box">
        <div id="clonedInput1" class="clonedInput">
        Age:<input type='text' name="" data-name="[age]">
        Location:<input type='text' name="" data-name="[lcoation]" >
        </div> 
    </div>
    <div class="clnbox">
        Age:<input type='text' name="data[1][age]" data-name="[age]">
        Location:<input type='text' name="data[1][lcoation]" data-name="[lcoation]" >

        Age:<input type='text' name="data[2][age]" data-name="[age]">
        Location:<input type='text' name="data[2][lcoation]" data-name="[lcoation]" >
    </div>

    <input type="submit" value="submit" name="datafill">
</form>

Here is the code with jquery:

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
    jQuery(document).ready(function($){    
        jQuery('.clone').change(function(){
            $('.clnbox .clonedInput').remove();  
            for (var i = 0; i <(this).value ; i++){
                var data_attr='data['+i+']'+($(".clonedInput input").attr('data-name'));
                cncate = data_attr;
                $(".cust_box > .clonedInput").clone().appendTo(".clnbox");
                $(".cust_box input").attr('name',cncate);     
            }
        });
    });
</script>

<select class="clone" name="clone_time">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<form name="frm" method="post" action"">
    First-name:<input type="text" name="firstname" >    
    <div class="cust_box">
        <div id="clonedInput1" class="clonedInput">
        Age:<input type='text' name="" data-name="[age]">
        Location:<input type='text' name="" data-name="[lcoation]" >
        </div> 
    </div>
    <div class="clnbox"></div>    
    <input type="submit" value="submit" name="datafill">
</form>

I need array output like this:

Array
(
    [firstname] => lockesh
    [data] => Array
        (
            [1] => Array
                (
                    [age] => 
                    [lcoation] => 
                )

            [0] => Array
                (
                    [age] => 33
                    [lcoation] => virar
                )

        )

    [datafill] => submit
)

https://jsfiddle.net/b06kc4Lk/3/

Answer 1

Why are you confusing the inputs so much? Do it simple, this way:

$(function () {
  $("#i").change(function () {
    $("ul").attr("class", $(this).val());
  });
});

* {margin: 0; padding: 0; list-style: none;}
form ul li {padding: 5px;}
.i1, .i2, .i3 {display: none;}
.one .i1 {display: block;}
.two .i1, .two .i2 {display: block;}
.three .i1, .three .i2, .three .i3 {display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="">
  <select name="i" id="i">
    <option value="">Select More</option>
    <option value="one">1 Guests</option>
    <option value="two">2 Guests</option>
    <option value="three">3 Guests</option>
  </select>
  <ul>
    <li>
      <label>
        <strong>First Name</strong>
        <input type="text" name="firstname" />
      </label>
    </li>
    <li class="i0">
      <label>
        <strong>Age #1</strong>
        <input type="text" name="age[0]" />
      </label>
      <label>
        <strong>Location #1</strong>
        <input type="text" name="loc[0]" />
      </label>
    </li>
    <li class="i1">
      <label>
        <strong>Age #2</strong>
        <input type="text" name="age[1]" />
      </label>
      <label>
        <strong>Location #2</strong>
        <input type="text" name="loc[1]" />
      </label>
    </li>
    <li class="i2">
      <label>
        <strong>Age #3</strong>
        <input type="text" name="age[2]" />
      </label>
      <label>
        <strong>Location #3</strong>
        <input type="text" name="loc[2]" />
      </label>
    </li>
    <li class="i3">
      <label>
        <strong>Age #4</strong>
        <input type="text" name="age[3]" />
      </label>
      <label>
        <strong>Location #4</strong>
        <input type="text" name="loc[3]" />
      </label>
    </li>
    <li>
      <input type="submit" value="Submit" />
    </li>
  </ul>
</form>