title: Applying AutoNumeric.js to an entire class
body: <p>I would love if someone could help me with what i thought would be a simple application of AutoNumeric.js. I have the below code:</p>
  
  <p>Fiddle link: <a href="https://jsfiddle.net/yu1s9nrv/8/" rel="nofollow noreferrer">https://jsfiddle.net/yu1s9nrv/8/</a> </p>
  
  
  
  <pre><code>&lt;table id="shareInput" class="table_standard"&gt;
    &lt;tr&gt;
      &lt;th&gt;Name&lt;/th&gt;
      &lt;th&gt;Quantity&lt;/th&gt;
      &lt;th&gt;Price&lt;/th&gt;
      &lt;th&gt;Growth&lt;/th&gt;
      &lt;th&gt;Yield&lt;/th&gt;
  
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="text" class="input_field_large" id="shareName" value=""&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" class="input_field_medium_num" id="shareQty" value=""&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" class="input_field_medium_dollar" id="sharePrice" value=""&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" class="input_field_medium_pct" id="shareGrowth" value=""&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" class="input_field_medium_pct" id="shareYield" value=""&gt;&lt;/td&gt;
  
  
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;&lt;input type="text" class="input_field_large" id="shareName" value=""&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" class="input_field_medium_num" id="shareQty" value=""&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" class="input_field_medium_dollar" id="sharePrice" value=""&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" class="input_field_medium_pct" id="shareGrowth" value=""&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" class="input_field_medium_pct" id="shareYield" value=""&gt;&lt;/td&gt;
  
    &lt;/tr&gt;
  &lt;/table&gt;
  
  &lt;script&gt;
    window.onload = function() {
  
  
      const anElement = new AutoNumeric('.input_field_medium_pct', 0, {
        suffixText: "%"
      });
  
    };
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The output I expect is for <em>all</em> the fields with the class input_field_medium_pct to have the desired AutoNumeric formatting, however it only formats the first field with that class. The documentation reads:</p>
  
  <blockquote>
    <p>// The AutoNumeric constructor class can also accept a string as a css
    selector. Under the hood this use <code>QuerySelector</code> and limit itself to
    only the first element it finds. anElement = new
    AutoNumeric('.myCssClass > input'); anElement = new
    AutoNumeric('.myCssClass > input', { options });</p>
  </blockquote>
  
  <p>Taken from: <a href="https://github.com/autoNumeric/autoNumeric#initialize-one-autonumeric-object" rel="nofollow noreferrer">https://github.com/autoNumeric/autoNumeric#initialize-one-autonumeric-object</a></p>
  
  <p>I'm new to JS the and find the AutoNumeric documentation notes to be slightly confusing, has anyone run into this issue or able to shed some light on why this might be the case? Thanks in advance.</p>