JSFiddle - React, Tailwind, and code Playground

by joeyczech

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="group" data-maxchar="500">

<input type="button" value="+ max 500" />

<input type="text" class="add-item-input" />
<input type="text" class="add-item-input" />
<input type="text" class="add-item-input" />

</div>

<div class="group" data-maxchar="4">

<input type="button" value="+ max 4" />

<input type="text" class="add-item-input" />
<input type="text" class="add-item-input" />
<input type="text" class="add-item-input" />

</div>

JavaScript

$('input[type=button]').on('click', function() {
	var group = $(this).closest('.group[data-maxchar]');
  $('<input type="text" class="add-item-input" />').appendTo(group);
});

$('.group[data-maxchar]').on('keypress paste', '.add-item-input', function (e) 
{
    var group = $(this).closest('.group[data-maxchar]');
		var maxLength = parseInt(group.attr("data-maxchar"));
    var remainingChar = getRemainingChars(group, maxLength);

    if (remainingChar <= 0) 
    {
    		e.preventDefault();
        return false;
    }
});

function getRemainingChars(group, max)
{
		let used = 0;
		var inputs = group.find('.add-item-input');
    if(inputs.length > 0)
    {
    	for(var i = 0; i < inputs.length; i++){
      	var inputLength = $(inputs[i]).val().length;
      	used += inputLength;
      }    
    }
    
    var remaining = max - used;
    return remaining;
}