JSFiddle - React, Tailwind, and code Playground

by fenderistic

HTML

<ul class="list-group">
        <li id="ltten" class="list-group-item highlight">Less than 10 <span class="pull-right">$34.50</span></li>
        <li id="tentoforty"class="list-group-item">10 to 40 <span class="pull-right">$34.50</span></li>
        <li id="gtforty" class="list-group-item">40+ <span class="pull-right">$34.50</span></li>
    </ul>

    <input type="text" onchange="setColor(this.value);" placeholder="Quantity">

JavaScript

function setColor(val){
    if(Number(val)<10){
        $("#ltten").css("background-color", "yellow");
        $("#tentoforty").css("background-color", "white");
        $("#gtforty").css("background-color", "white");
    } else if(Number(val)<=40){
         $("#tentoforty").css("background-color", "yellow");
        $("#ltten").css("background-color", "white");
        $("#gtforty").css("background-color", "white");
        
    } else {
         $("#gtforty").css("background-color", "yellow");
        $("#ltten").css("background-color", "white");
        $("#tentoforty").css("background-color", "white");
    }
}