JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div id="selections" class="selections">
<div class="images-container">
<div class="clearfix" onchange = "check()"> <!--Onchage here!-->
<div class="pull-left">
<div class="image-options">
<div class="product-option">
<div class="qty">
<input name="qty1" type="number" min="0" value="0" />
</div>
<div>Product Description 1</div>
</div>
<div class="product-option">
<div class="qty">
<input name="qty2" type="number" min="0" value="0" />
</div>
<div>Product Description 2</div>
</div>
<div class="product-option">
<div class="qty">
<input name="qty3" type="number" min="0" value="0" />
</div>
<div>Product Description 3</div>
</div>
</div>
<div class="image-options">
<div class="product-option">
<div class="qty">
<input name="qty4" type="number" min="0" value="0" />
</div>
<div>Product Description 4</div>
</div>
<div class="product-option">
<div class="qty">
<input name="qty5" type="number" min="0" value="0" />
</div>
<div>Product Description 5</div>
</div>
<div class="product-option">
<div class="qty">
<input name="qty6" type="number" min="0"...
CSS
input[type="number"] {
width: 40px;
}
.has-value {
border-color: #3c763d;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
JavaScript
var inputs = new Array();
window.onload = function () {
var qtys = document.getElementsByClassName("qty");
for (var i = qtys.length - 1; i >= 0; i--) {
inputs[i] = qtys[i].children[0];
};
}
function check() {
for (var i = inputs.length - 1; i >= 0; i--) {
if(inputs[i].value>0){
inputs[i].classList.add("has-value");
}
else{
inputs[i].classList.remove("has-value");
}
};
}