Find only inputs type number that have quantities of 0

Question

I opened this thread: Set number input max based on the sum of 4 inputs using jquery and reset quantity

it works but I need to understand, in the list of divs that contain the quantity input, the only ones that have quantity at 0 in order to disable them on click and not allow selection.

I explain the situation better:

1. the quantity fields must start from 0, but only initially because then the user must then change the quantity at will. <-- it works

2. the sum of the quantities must be 2 and therefore do not allow to add other quantities greater than 2. <-- it works

3. what i miss is that i must not allow the user to select the field if there are options to 0 after the first change of quantity (if condition of 2 quantity is reached) so as not to allow the selection. It is also okay to disable the click on the div and or make it blurry.

for example

4 input fields initially: 

0
0
0
0 

4 input fields after the quantity change: 

0 -> change to 1
0 -> change to 1
0 -> change to 0 <-- condition of 2 quantities selected with the 2 fields above, this 
                     at 0 does not make it clickable
0 -> change to 0 <-- condition of 2 quantities selected with the 2 fields above, this 
                     at 0 does not make it clickable

Here the html: https://pastebin.com/DjX8Kkt1

Here my Javascript/Jquery code:

$("input[type='number'].wapo-product-qty").attr({
   "max" : 2,        // substitute your own
   "min" : 0          // values (or variables) here
});

$("input[type='number'].wapo-product-qty").val(0); 
$('button#add_to_cart_button').css("visibility", "hidden");

$("input[type='number'].wapo-product-qty").change(function () {
$.each($("input[type='number'].wapo-product-qty"), function 
(index, element) {
    var total = 0;
    $.each($("input[type='number'].wapo-product- 
   qty").not($(element)), function (innerIndex, innerElement) {
        total += parseInt($(innerElement).val());
    });
        
  var allinputs = 
document.querySelectorAll("input[type='number'].wapo-product- 
   qty, .selection-multiple");
      var myLength = allinputs.length;
      var input;
        
  for (var i = 0; i < myLength; ++i) {
    input = allinputs[i];
if (input.value == 0) {
    input.style.backgroundColor = "lime";
    }
    else{
          input.style.backgroundColor = "lightblue";
          input.style.pointerEvents = "all";
    }
  }

    if ($(element).val() > 2 - total) 
            {
             $('button#add_to_cart_button').css("visibility", 
"hidden");
             alert('la quantità complessiva non può essere superiore a 2');
             event.target.value = 0;
     return false;
   } 
          else if ($(element).val() == 2 - total) {
          $('button#add_to_cart_button').css("visibility", 
"visible");
         }
         
         else 
         {
    $(element).attr("max", 2 - total);
          $('button#add_to_cart_button').css("visibility", 
"hidden");
       }
    });
});

I find a partial solution in this code section, and so I detect only those that have a value of 0.

But I want to apply a different css to the class

.selection-multiple

how is this possible? Because in there he sees me both

input[type='number'].wapo-product-qty, .selection-multiple 

and apply the same style for both, but I need to apply a different style for each in the condition of the for loop, which is the input quantity equal to 0.

var allinputs = 
document.querySelectorAll("input[type='number'].wapo-product- 
   qty, .selection-multiple");
      var myLength = allinputs.length;
      var input;
        
  for (var i = 0; i < myLength; ++i) {
    input = allinputs[i];
if (input.value == 0) {
    input.style.backgroundColor = "lime";
    }
    else{
          input.style.backgroundColor = "lightblue";
          input.style.pointerEvents = "all";
    }
  }