title: Get Multiple Input Values from same class and store it in a json variable
body: <p>I got here a multiple values that store its data on an array. I expected that the data from the field will be seperated from each line.</p>
  
  <p>Actual Result:
  ["firstname","middlename","lastname","bday","firstname", ...]</p>
  
  <p>Expected : ["firstname","middlename","lastname","bday"],["firstname","middlename","lastname","bday"]</p>
  
  <p>Please see code below:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
    $("#btnAddChild").click(function(e) {
      e.preventDefault();
      $("#childinfo_div").append('&lt;div class="col-xl-3"&gt;&lt;div class="form-group child_sub"&gt;&lt;p&gt;First Name:&lt;/p&gt;&lt;input type="text" class="form-control" id="child_fname" /&gt;&lt;/div&gt;&lt;/div&gt;');
      $("#childinfo_div").append('&lt;div class="col-xl-3"&gt;&lt;div class="form-group child_sub"&gt;&lt;p&gt;Middle Name:&lt;/p&gt;&lt;input type="text" class="form-control" id="child_mname" /&gt;&lt;/div&gt;&lt;/div&gt;');
      $("#childinfo_div").append('&lt;div class="col-xl-3"&gt;&lt;div class="form-group child_sub"&gt;&lt;p&gt;Last Name:&lt;/p&gt;&lt;input type="text" class="form-control" id="child_lname" /&gt;&lt;/div&gt;&lt;/div&gt;');
      $("#childinfo_div").append('&lt;div class="col-xl-3"&gt;&lt;div class="form-group child_sub"&gt;&lt;p&gt;Birthdate:&lt;/p&gt;&lt;input type="date" class="form-control" id="child_bday" /&gt;&lt;/div&gt;&lt;/div&gt;');
  
    });
  });
  
  function GetInfo() {
    var info = [];
    $(".child_sub").each(function() {
  
      $(this).children("input").each(function() {
        info.push(this.value);
      });
  
    });
    console.log(info);
    event.preventDefault();
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.4.1.min.js"&gt;&lt;/script&gt;
  &lt;button class="btn btn-info btn-sm" id="btnAddChild"&gt;ADD&lt;/button&gt;
  &lt;button class="btn btn-success" onclick="GetInfo();"&gt; GET INFO&lt;/button&gt;
  &lt;div class="row" id="childinfo_div"&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>