Add thousand separator with javascript when add input dynamically

Question

I have problem when adding input dynamically with thousand separator, when I click add and the input form appears. it should be when I type the number it will be arranged in thousand separator. Please help me

$(document).ready(function(){
 $(document).on('click', '.add', function(){
  var html = '';
  html += '<tr>';
  html += '<td><input type="text" name="item_name[]" class="form-control inputnumber" onkeypress="return event.keyCode > 47 && event.keyCode < 58 || event.keyCode == 46" /></td>';
  html += '</tr>';
  $('#item_table').append(html);
 });

$('input.inputnumber').keyup(function(event) {
  if (event.which >= 37 && event.which <= 40) return;
  $(this).val(function(index, value) {
    return value
      // Keep only digits and decimal points:
      .replace(/[^\d.]/g, "")
      // Remove duplicated decimal point, if one exists:
      .replace(/^(\d*\.)(.*)\.(.*)$/, '$1$2$3')
      // Keep only two digits past the decimal point:
      .replace(/\.(\d{2})\d+/, '.$1')
      // Add thousands separators:
      .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
  });
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="table-repsonsive">
     <table class="table table-bordered" id="item_table">
      <tr>
       <th><button type="button" name="add" class="btn btn-success btn-sm add">ADD</button></th>
      </tr>
     </table>
    </div>

Answer 1

You can use the NumberFormat object

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat

$(document).ready(function() {
  $(document).on('click', '.add', function() {
    var html = '';
    html += '<tr>';
    html += '<td><input type="text" name="item_name[]" class="form-control inputnumber" ></td>';
    html += '</tr>';
    $('#item_table').append(html);
  });

  $('#item_table').change(function(event) {
    if (event.target.classList.contains("inputnumber")) {
      // remove any commas from earlier formatting
      const value = event.target.value.replace(/,/g, '');
      // try to convert to an integer
      const parsed = parseInt(value);
      // check if the integer conversion worked and matches the expected value
      if (!isNaN(parsed) && parsed == value) {
        // update the value
        event.target.value = new Intl.NumberFormat('en-US').format(value);
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="table-repsonsive">
  <table class="table table-bordered" id="item_table">
    <tr>
      <th><button type="button" name="add" class="btn btn-success btn-sm add">ADD</button></th>
    </tr>
  </table>
</div>

Answer 2

I would use the Intl.NumberFormat() constructor. You can find the docs and all the different options here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat

In the snippet below, you will see the formatting change as you type. If you add in text, it will just delete out the text. If you add in a second decimal, it won't do anything at first I've forgotten most of the jQuery I once knew, so I wrote the snippet in Vanilla JS. I included comments on each line to explain the step.

const table = document.querySelector(`#item_table`);

// Add an event listener to the button in the form
table.querySelector(`button`).addEventListener(`click`, function() {

  // Create a <tr> element
  const tr = document.createElement(`tr`);

  // Create a <td> element
  const td = document.createElement(`td`);

  // Create an <input> element
  const inpt = document.createElement(`input`);

  // Add the input attributes
  inpt.type = `text`;
  inpt.classList.add(`form-control`);
  inpt.classList.add(`inputnumber`);

  // Add an event listener to the input element
  inpt.addEventListener(`keyup`, function(event) {
    // Current string value of the input
    const value = this.value;

    // Split the value string into an array on each decimal and 
    // count the number of elements in the array
    const decimalCount = value.split(`.`).length - 1;

    // Don't do anything if a first decimal is entered
    if (event.key === `.` && decimalCount === 1) return

    // Remove any commas from the string and convert to a float
    // This will remove any non digit characters and second decimals
    const numericVal = parseFloat(value.replace(/,/g, ''));

    //NumberFormat options
    const options = {
      style: `decimal`,
      maximumFractionDigits: 20,
    };

    // Assign the formatted number to the input box
    this.value = new Intl.NumberFormat(`en-US`, options).format(numericVal);
  })
  // Append the input to the td
  td.append(inpt);

  // Append the td to the tr
  tr.append(td);

  // Append the tr to the table
  table.append(tr);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="table-repsonsive">
  <table class="table table-bordered" id="item_table">
    <tr>
      <th><button type="button" name="add" class="btn btn-success btn-sm add">ADD</button></th>
    </tr>
  </table>
</div>