Changing the property of HTML input field not taking place using java script

Question

I have a form that has two fields stationery type and stationery request qty. The stationery rqst qty field of the form accepts the number. The minimum number which can be entered in this field(QTY) depends upon the value of the stationery type field i.e. If the stationery type field value is 'pencil' then the minimum value property of the stationery request qty field should be 5 and if it is 'notepad' then the minimum property of the stationery request qty field should be 10. I am doing it by the given code but it's not working.it gives always the qnty for the first stationerytype the jsfiddle is js fiddle

function random() {
                    document.querySelector('[name="stationerytype[]"]').value = ""
  
                    var a = document.getElementById('purpose').value;
                    if (a === "Meeting") {
                    var datalist = "datalist1";
                    } else if (a === "Departmental") {
                    var datalist = "datalist2";
                    }
    
                    document.querySelector('[name="stationerytype[]"]').setAttribute("list", datalist)

                    }
          
          var options = document.querySelectorAll(".option1");
            options.forEach(function(option) {
              option.addEventListener("keyup", function() {
                calculatingMinimunQuantity(option);
              });
              option.nextElementSibling.addEventListener('change', evt => {
                if (+evt.target.value < +evt.target.min) evt.target.value = evt.target.min
              });
            });
            
            function calculatingMinimunQuantity(option) {
              var minimum = 0, step1 = 0;
              var value = option.value;
              if (value === "PENCIL") {
                minimum = "5";
                step1="5";
              } else if (value === "NOTEPAD") {
                minimum = "10";
                step1="10";
              }
              //   getting the quantity input field
              option.nextElementSibling.setAttribute("min", minimum);
              option.nextElementSibling.setAttribute("step", step1);
              
        }

<div class="col-sm-6">
                    <label for="purpose">Purpose</label>
                    <select type="text" name="purpose" id="purpose" class="form-control" onchange="random()" required />
                    <option ></option>
                    <option value="Meeting">Meeting</option>
                    <option value="Departmental">Departmental</option>
                    </select>
                    </div>
                  
        <td><input  type="text" name="stationerytype[]" id="stationerytype" class="option1 form-control" autocomplete="off"  required>
                <datalist id="datalist1" >
                <option value=""></option>
                <option value="MEETING PEN">MEETING PEN</option>
                <option value="NOTEPAD">NOTEPAD</option>
                <option value="PLASTIC FOLDER">PLASTIC FOLDER</option>
                <option value="PENCIL">PENCIL</option>
                </datalist> 
                
                <datalist id="datalist2" >
                <option value=""></option>
                <option value="A4 GREEN REAM">A4 GREEN REAM</option>
                <option value="A4 WHITE REAM">A4 WHITE REAM</option>
                <option value="BMO LETTER HEAD">BMO LETTER HEAD</option>
                </datalist>
          </td>
                            
                    
                            
        <td><input type="NUMBER" name="stationeryqtyrqst[]" id="stationeryqtyrqst" class="form-control" required ></td>

Answer 1

You are trying to get the nextSibling element of option in the JS function, but the nextSibling element picked is body element. If you are using td element, then you need to properly use the table element for JS to work properly.

Here is the updated HTML and JS to achieve your requirement.

<div class="col-sm-6">
  <label for="purpose">Purpose</label>
  <select type="text" name="purpose" id="purpose" class="form-control" onchange="random()" required />
    <option ></option>
    <option value="Meeting">Meeting</option>
    <option value="Departmental">Departmental</option>
  </select>
</div>
                    
<table>
  <tbody>
    <tr>             
      <td><input  type="text" name="stationerytype[]" id="stationerytype" class="option1 form-control" autocomplete="off"  required>
        <datalist id="datalist1" >
          <option value=""></option>
          <option value="MEETING PEN">MEETING PEN</option>
          <option value="NOTEPAD">NOTEPAD</option>
          <option value="PLASTIC FOLDER">PLASTIC FOLDER</option>
          <option value="PENCIL">PENCIL</option>
        </datalist> 

        <datalist id="datalist2" >
          <option value=""></option>
          <option value="A4 GREEN REAM">A4 GREEN REAM</option>
          <option value="A4 WHITE REAM">A4 WHITE REAM</option>
          <option value="BMO LETTER HEAD">BMO LETTER HEAD</option>
        </datalist>
      </td>   
      <td><input type="NUMBER" name="stationeryqtyrqst[]" id="stationeryqtyrqst" class="form-control" required ></td>
    </tr>
  </tbody>
</table>

And here is the update JS

function random() {
                    document.querySelector('[name="stationerytype[]"]').value = ""
  
                    var a = document.getElementById('purpose').value;
                    if (a === "Meeting") {
                    var datalist = "datalist1";
                    } else if (a === "Departmental") {
                    var datalist = "datalist2";
                    }
    
                    document.querySelector('[name="stationerytype[]"]').setAttribute("list", datalist)

                    }
          
          var options = document.querySelectorAll(".option1");
            options.forEach(function(option) {
              option.addEventListener("keyup", function() {
                calculatingMinimunQuantity(option);
              });
              option.nextElementSibling.addEventListener('change', evt => {
                if (+evt.target.value < +evt.target.min) evt.target.value = evt.target.min
              });
            });
            
            function calculatingMinimunQuantity(option) {
           
              var minimum = 0, step1 = 0;
              var value = option.value;
              if (value === "PENCIL") {
                minimum = "5";
                step1="5";
              } else if (value === "NOTEPAD") {
                minimum = "10";
                step1="10";
              }
              
              //   getting the quantity input field
              option.parentNode.nextElementSibling.firstChild.setAttribute("min", minimum);
              option.parentNode.nextElementSibling.firstChild.setAttribute("step", step1);
              
        }
              
    
                        
                
                        
    

Answer 2

You're using option.nextElementSibling to call element with id stationeryqtyrqst, but it is pointing to your datalist with id datalist1. You should use document.getElementById instead, like this:

function calculatingMinimunQuantity(option) {

        var minimum = 0, step1 = 0;
        var value = option.value;
        if (value === "PENCIL") {
            minimum = "5";
            step1 = "5";
        } else if (value === "NOTEPAD") {
            minimum = "10";
            step1 = "10";
        }
        //   getting the quantity input field
        var stationeryqtyrqst = document.getElementById("stationeryqtyrqst");
        stationeryqtyrqst.setAttribute("min", minimum);
        stationeryqtyrqst.setAttribute("step", step1);

    }