AutoNumeric Multiple - Append Rows With TextBox On Click Add Button

Question

I'm having an issue with http://autonumeric.org/ plugin. When click on add button, it will append a row with some input fields. those fields are integer and decimal fields. once row has appended it then it will initialize autonumeric with multiple fields. appended multiple rows with text fields then getting issue with input fields.

 - inputting the value, it's showing multiple textboxes and inputted value showing
 - inputted 5 at third textbox: showing as 555


    <div class='container'>
  <div class='row mt-4'>
    <div class='col-12'>
      <h3>AutoNumeric Append Text Box with AutoNumeric</h3>
    </div>
    <div class='col-12 pl-4'>
      <button type='button' class='btn btn-danger' onclick='doAppendRow()'>Add</button>
    </div>
    <div class='col-12' id='dvappend'></div>
  </div>
</div>```


    ```var row = 1;
const autoNumericOptions = {
  allowDecimalPadding: "floats",
  decimalCharacter: ",",
  digitGroupSeparator: "",
  emptyInputBehavior: "zero",
  decimalPlaces: 2
  // watchExternalChanges: true //!!!
};
function doAppendRow() {
  var output =
    "<div class='row' id='row_" +
    row +
    "'><div class='col-12'><div class='form-group'><label>Qty</label><input type='text' name='txtqty[]' class='form-control' /></div><div class='form-group'><label>Amount</label><input type='text' name='txtamount[]' class='form-control' /></div></div></div>";

  $("#dvappend").append(output);
  new AutoNumeric.multiple("input[name^=txtqty]", autoNumericOptions);
  new AutoNumeric.multiple("input[name^=txtamount]", autoNumericOptions);
  row++;
}



Please help!

CodePen Link: https://codepen.io/muruganrsm/pen/eYVqqZY

Answer 1

Autonumeric can't initialize the same DOM element multiple times.

To address do this the trick, you must add id input dynamically:

<input type='text' name='txtamount[]' class='form-control' id='rows_" + row+"'/>

Then, create instance:

new AutoNumeric("#rows_"+row, autoNumericOptions);