title: storage of dynamic input fields as array of objects
body: <p>I'm new with jquery</p>
  <p>I have made a program code to dynamically create input fields on button click and after which the input fields that are produced must have unique ids</p>
  <p>The problem I'm facing is I am not able to store these input values as array of objects</p>
  <p>Been working around this problem,but not able to resolve it</p>
  <p>Here is my jsFiddle link,</p>
  <p><a href="https://jsfiddle.net/dx4681cb/6/" rel="nofollow noreferrer">https://jsfiddle.net/dx4681cb/6/</a></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>var a = 0;
  var fieldFilter;
  var fieldType;
  var fieldValue;
  var dataStored = [];
  var valueStored = [];
  $("#addInput").on("click", function() {
    a += 1;
    fieldFilter = `#filter-field${a}`;
    fieldType = `#filter-type${a}`;
    fieldValue = `#filter-value${a}`;
    $("#inputAdder").append(
      `&lt;div class = "row" id="appender${a}"&gt;
       &lt;div class="col-md-4 padderSpace"&gt;
         &lt;select id = "filter-field${a}"&gt;
           &lt;option value="name"&gt;Name&lt;/option&gt;
           &lt;option value="password"&gt;Password&lt;/option&gt;
           &lt;option value="username"&gt;Username&lt;/option&gt;
           &lt;option value="age"&gt;Age&lt;/option&gt;
           &lt;option value="gender"&gt;Gender&lt;/option&gt;
         &lt;/select&gt;
       &lt;/div&gt;
       &lt;div class="col-md-4 padderSpace"&gt;
         &lt;select id = "filter-type${a}"&gt;
           &lt;option value="="&gt;=&lt;/option&gt;
           &lt;option value="&lt;"&gt;&lt;&lt;/option&gt;
           &lt;option value="&lt;="&gt;&lt;=&lt;/option&gt;
           &lt;option value="&gt;"&gt;&gt;&lt;/option&gt;
           &lt;option value="&gt;="&gt;&gt;=&lt;/option&gt;
           &lt;option value="!="&gt;!=&lt;/option&gt;
           &lt;option value="like"&gt;like&lt;/option&gt;
         &lt;/select&gt;
       &lt;/div&gt;
       &lt;div class="col-md-4 padderSpace"&gt;
         &lt;input id="filter-value${a}"&gt;
       &lt;/div&gt;
     &lt;/div&gt;`
    )
    dataStored.push({
      field: fieldFilter,
      type: fieldType,
      value: fieldValue
    });
    console.log(dataStored)
  })
  $("#inputAdder").on("change", fieldFilter, fieldType, changeFunc);
  $("#inputAdder").on("keyup", fieldValue, changeFunc);
  
  function changeFunc() {
    for (let i = 0; i &lt;= dataStored.length; i++) {
      valueStored.push({
        field: $(dataStored[i].field).val(),
        type: $(dataStored[i].type).val(),
        value: $(dataStored[i].value).val()
      })
      console.log("Stored Values", valueStored);
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.padderSpace {
    padding-top: 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
  
  &lt;button type="button" class="btn btn-primary" id="addInput"&gt;Add Input Fields&lt;/button&gt;
  
  &lt;div id="inputAdder"&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>