How to dynamically restrict duplicated value of <input='text'/> in a looped random value from <input='number'/> field

Question

$('#inputqty').on('change keyup',function(){
  let inputs='';
  let value = parseInt($(this).val());
  if (0<value) {
    for (let i = 0; i<value; i++) {
      inputs+=`<div style="margin-left: 10px; margin-top: 10px;">
                <input autocomlete="off" type="text" style="margin-bottom:5px;margin-top:5px; margin-left:10px;"  name="item_serial" id="serial_number" placeholder=" Serial Number. item:${i+1}" tabindex="${i+6+1}" required /></br>
              </div>`
      }
  }
  else{
    inputs+=`<center>No item Quantity inputted!!!<center>`
    }
  $('#contentforserial').html(inputs);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" min="1" max="10"id="inputqty" name="inputqty">

<div style="height: 190px;width:260px;padding:3px; background:greenyellow;" id="containerforserial">
    <div>Enter Serial Number of Item:</div>
    <div class="contentforserial" id="contentforserial" style="  height:150px;overflow:auto;background:#fff;">
      <div id="demo"></div>
    </div>
</div>

Answer 1

Create an object which will be used as database to store input values. Loop through input elements and store value as key in the object and an array as key. Push input element in the array. Then loop through object values (array of input elements) and if array contains more than one input element, that means these input elements have duplicate values, do whatever you want with them:

const myInputs = document.getElementById("myinputs");

document.getElementById("inputqty").addEventListener("input", onInput);

onInput.bind(document.getElementById("inputqty"))();

function onInput(e)
{
  const value = Math.max(~~this.value, 0);
  // show/hide message
  noinputs.classList.toggle("hidden", value > 0);
  let i = 1;
  //create new inputs
  while(myInputs.children.length < value)
  {
    const input = document.createElement("input");
    input.className = "serial_number";
    input.id = `serial_number${i}`;
    input.name = "item_serial[]";
    input.placeholder = `Serial Number. item:${i}`;
    input.tabIndex = `${i+6}`;
    input.autocomplete = "off";
    input.required = true;
    input.addEventListener("input", checkInputs);
    myInputs.appendChild(input);
    i++;
  }
  //remove excess inputs
  while(myInputs.children.length > value)
    myInputs.removeChild(myInputs.lastChild);

  //make sure we check for duplcates again in case inputs were removed
  checkInputs();
};

function checkInputs(e)
{
  //generate list of values from all inputs
  const values = {};
  for(let i = 0; i < myInputs.children.length; i++)
  {
    const value = myInputs.children[i].value.trim();
    if (!values[value])
      values[value] = [];

    values[value].push(i);
  }
  //check if multiple inputs have the same value
  for(let value in values)
  {
    const inputs = values[value];
    for(let i = 0, count = inputs.length; i < count; i++)
    {
      const input = myInputs.children[inputs[i]];
      input.classList.toggle("error", value !== "" && count > 1);
    }

  }
}

.error
{
  background-color: red;
}

#myinputs > input
{
  margin-bottom:5px;
  margin-top:5px;
  margin-left:10px;
}

#noinputs.hidden
{
  display: none;
}

#containerforserial
{
  height: 190px;
  width:260px;
  padding:3px;
  background:greenyellow;
}

#contentforserial
{
  height:150px;
  overflow:auto;
  background:#fff;
}

<input type="number" min="1" max="10" id="inputqty" name="inputqty" value="1">

<div id="containerforserial">
  <div>Enter Serial Number of Item:</div>
  <div class="contentforserial" id="contentforserial">
    <div id="myinputs"></div>
    <center id="noinputs">No item Quantity inputted!!!</center>
    <div id="demo"></div>
  </div>
</div>

And please avoid using bloatware jquery and inline styles.

Answer 2

Add a class name to your input text inside the loop then

var array = $('.className').map(function(){
  return $(this).val()
}).get();

this array will give you values of input fields, you can validate it, and add the validation error message to the relevant input field using the index of the array.

Answer 3

You can create one function to check duplicate value then on your input add onchange event call to this function

Example

function checkForDuplicates() {      
    var valuesAlreadySeen = []
    $(".serial_number").each(function() {
        if($(this).val() != ""){
          if (valuesAlreadySeen.indexOf( $(this).val() ) !== -1) {
            /* do some thing here */
            alert( $(this).val()+' already input' );
            
            /* clear this input */
            $(this).val("");
          }else{
            valuesAlreadySeen.push( $(this).val() );
          }
        }        
    });
  
}

Then add class and on change event to your input

<input class="serial_number" onchange="checkForDuplicates()" />

So, your final code should be

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <input type="number" min="1" max="10"id="inputqty" name="inputqty">
        
        <div style="height: 190px;width:260px;padding:3px; background:greenyellow;" id="containerforserial">
            <div>Enter Serial Number of Item:</div>
            <div class="contentforserial" id="contentforserial" style="  height:150px;overflow:auto;background:#fff;">
              <div id="demo"></div>
            </div>
        </div>
    
    <script>
    $(document).ready(function(){
      $('#inputqty').on('change keyup',function(){
        let inputs='';
        let value = parseInt($(this).val());
        if (0<value) {
          for (let i = 0; i<value; i++) {
            inputs+=`<div style="margin-left: 10px; margin-top: 10px;">
                <input class="serial_number" onchange="checkForDuplicates()" autocomlete="off" type="text" style="margin-bottom:5px;margin-top:5px; margin-left:10px;"  name="item_serial[]" placeholder=" Serial Number. item:${i+1}" tabindex="${i+6+1}" required /></br>
              </div>`
          }
        }
        else{
          inputs+=`<center>No item Quantity inputted!!!<center>`
        }
        $('#contentforserial').html(inputs);
      });
    });
    
    function checkForDuplicates() {
         
        var valuesAlreadySeen = []
        $(".serial_number").each(function() {
            if($(this).val() != ""){
              if (valuesAlreadySeen.indexOf( $(this).val() ) !== -1) {
                /* do some thing here */
                alert( $(this).val()+' already input' );
                $(this).val("");/* clear this input */
              }else{
                valuesAlreadySeen.push( $(this).val() );
              }
            }        
        });
      
    }
    </script>