title: JQuery - Iterate through textboxes and save values to Javascript object
body: <p>I have a button when clicked it iterates through some html elements by class and saves the value to a javascript object. There are 5 html elements per row. How can I save the value of each rows textbox to a corresponding key in the javascript object. The javascript object has the following keys Qty, Length, Breadth, Height, Mass, Description</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>$.each($('.myClass'), function(index, value) {
    var obj = {
      "Qty": $(this).val(),
      "Length": $(this).val(),
      "Breadth": $(this).val(),
      "Height": $(this).val(),
      "Mass": $(this).val(),
      "Description": $(this).val(),
      "VolWeight": ""
    };
    console.log(obj);
  });</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;div class="row g-3"&gt;
    &lt;div class="col-md-2"&gt;
      @*&lt;input id="txtQty" class="form-control" placeholder="Quantity" type="text" value="1" /&gt;*@
      &lt;div class="js-quantity-counter input-group-quantity-counter"&gt;
        &lt;input type="number" class="js-result form-control input-group-quantity-counter-control myClass" value="1" id="txtQty4" data-rule-digits="true"&gt;
  
        &lt;div class="input-group-quantity-counter-toggle"&gt;
          &lt;a class="js-minus input-group-quantity-counter-btn" href="javascript:;"&gt;
            &lt;i class="tio-remove"&gt;&lt;/i&gt;
          &lt;/a&gt;
          &lt;a class="js-plus input-group-quantity-counter-btn" href="javascript:;"&gt;
            &lt;i class="tio-add"&gt;&lt;/i&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  
    &lt;div class="col-md-2"&gt;
      @*&lt;input id="txtLength" class="form-control" placeholder="Length (cm)" type="number" value="1" /&gt;*@
      &lt;div class="js-quantity-counter input-group-quantity-counter"&gt;
        &lt;input type="number" class="js-result form-control input-group-quantity-counter-control myClass" value="1" id="txtLength4" data-rule-digits="true" max="600" data-msg="Max length 600cm"&gt;
  
        &lt;div class="input-group-quantity-counter-toggle"&gt;
          &lt;a class="js-minus input-group-quantity-counter-btn" href="javascript:;"&gt;
            &lt;i class="tio-remove"&gt;&lt;/i&gt;
          &lt;/a&gt;
          &lt;a class="js-plus input-group-quantity-counter-btn" href="javascript:;"&gt;
            &lt;i class="tio-add"&gt;&lt;/i&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="col-md-2"&gt;
      @*&lt;input id="txtBreadth" class="form-control" placeholder="Breath (cm)" type="number" value="1" /&gt;*@
      &lt;div class="js-quantity-counter input-group-quantity-counter w-100"&gt;
        &lt;input type="number" class="js-result form-control input-group-quantity-counter-control myClass" value="1" id="txtBreadth4" data-rule-digits="true" max="250" data-msg="Max length 250cm"&gt;
  
        &lt;div class="input-group-quantity-counter-toggle"&gt;
          &lt;a class="js-minus input-group-quantity-counter-btn" href="javascript:;"&gt;
            &lt;i class="tio-remove"&gt;&lt;/i&gt;
          &lt;/a&gt;
          &lt;a class="js-plus input-group-quantity-counter-btn" href="javascript:;"&gt;
            &lt;i class="tio-add"&gt;&lt;/i&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="col-md-2"&gt;
      @*&lt;input id="txtHeight" class="form-control" placeholder="Height (cm)" type="number" value="1" /&gt;*@
      &lt;div class="js-quantity-counter input-group-quantity-counter w-100"&gt;
        &lt;input type="number" class="js-result form-control input-group-quantity-counter-control myClass" value="1" id="txtHeight4" data-rule-digits="true" max="250" data-msg="Max length 250cm"&gt;
  
        &lt;div class="input-group-quantity-counter-toggle"&gt;
          &lt;a class="js-minus input-group-quantity-counter-btn" href="javascript:;"&gt;
            &lt;i class="tio-remove"&gt;&lt;/i&gt;
          &lt;/a&gt;
          &lt;a class="js-plus input-group-quantity-counter-btn" href="javascript:;"&gt;
            &lt;i class="tio-add"&gt;&lt;/i&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="col-md-2"&gt;
      @*&lt;input id="txtMass" class="form-control" placeholder="Mass (kg)" type="number" value="1" /&gt;*@
      &lt;div class="js-quantity-counter input-group-quantity-counter"&gt;
        &lt;input type="number" class="js-result form-control input-group-quantity-counter-control myClass" value="1" id="txtMass4" data-rule-digits="true"&gt;
  
        &lt;div class="input-group-quantity-counter-toggle"&gt;
          &lt;a class="js-minus input-group-quantity-counter-btn" href="javascript:;"&gt;
            &lt;i class="tio-remove"&gt;&lt;/i&gt;
          &lt;/a&gt;
          &lt;a class="js-plus input-group-quantity-counter-btn" href="javascript:;"&gt;
            &lt;i class="tio-add"&gt;&lt;/i&gt;
          &lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="col-md-2"&gt;
      &lt;select class="js-select2-custom custom-select myClass" size="1" id="txtDescription4" style="opacity: 0;" data-hs-select2-options='{ "minimumResultsForSearch": "Infinity","placeholder": "Load Type" }'&gt;
        &lt;option value="Boxes"&gt;Boxes&lt;/option&gt;
        &lt;option value="Envelop"&gt;Envelop&lt;/option&gt;
        &lt;option value="Pallet"&gt;Pallet&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>