How do I force the input field to enter numbers only in the range 1 - 12?

I am trying to add a keyup event into my dynamically created input element.

The keyup event doesn't work when I execute the code. Where have I gone wrong?

    for(var j = 1; j < table.rows.length; j++){
         if(table.rows[j].cells.item(10).innerHTML != 0 && table.rows[j].cells.item(10).innerHTML != null){
              var row = t1.insertRow(t1.rows.length);
              var cell = row.insertCell(0);
              var cell1 = row.insertCell(1);
              var cell2 = row.insertCell(2);
                        
              cell.innerText = table.rows[j].cells.item(2).innerText;
              var formatter = new Intl.NumberFormat('en-IN', {
                              style: 'currency',
                              currency: 'INR',
              });
              cell1.innerText = formatter.format(table.rows[j].cells.item(10).innerText);
                        
              var input=document.createElement("input");
              input.style.textAlign="center";
              input.className="installments";
              input.type="number";
              input.placeholder = "range (1-12)"                       

              $(function() { 
                  $('.installments').keyup(function() {
                      const inputVal = parseInt($(this).val());
                      console.log(inputVal); //shows nothing as I give input

                      if (inputVal <= 0 || inputVal > 12 || parseString(inputVal).includes('.')){
                           $(this).val()="";
                           alert("Installments should be within 1-12 months range and should be a whole number");
                      }
                  });
              });
                          
              input.style.width="10em";
              cell2.appendChild(input);
        }
  }