JSFiddle - React, Tailwind, and code Playground

HTML

<div class="productContainer" id="someID">
        <ul class="productfeaturelist">
            <li class="productItem">
                <div id="CO20L">
                    <span class="type">20L</span>
                    <div class="listQuantity">
                        <input type="text" class="productTextInput" value="0" />
                    </div>
                    <div class="hidden listType">
                        <div class="catProdAttributeItem">
                            <select mandatory="1">
                                <option value="">-- Please select --</option>
                                <option value="13656898">20 $1200</option>
                                <option value="13656899">60 $1100</option>
                                <option value="13656922">200 $900</option>
                                <option value="13656923">1000 $500</option>
                            </select>
                        </div>
                    </div>

                    <label class="hectare dynamicDetails"></label>
                    <label class="total dynamicDetails"></label>
                    <div class="remove">
                        <a href="#" class="remove" title="Remove product"></a>
                    </div>
    
                    <div class="clear"></div>

                </div>
            </li>
            <li class="productItem">
                <div id="CO200L">
                    <span class="type">200L</span>
                    <div class="listQuantity">
                        <input type="text" class="productTextInput" value="0" />
                    </div>
                    <div class="hidden listType">
                        <div class="catProdAttributeItem">
                            <select mandatory="1">
                                <option value="">-- Please select --</option>
                                <option value="13656898">20 $1200</option>
                                <option...

JavaScript

$("#someID .productTextInput").keyup(function() {
     
    $(this).closest('li').find("a.remove").fadeIn(250);
    
	var selectedType = $(this).closest('li').find(".type").text();
    var match = selectedType.match(/\d{1,5}L/g);
    if(match.length == 1) {
        
        var L = selectedType.replace(/,/g, '').replace('L', '');
        var quantity = parseInt($(this).val());
        var chooseCost =  parseInt(L * quantity);
        
        $(this).closest('li').find(".hectare").text(L * quantity + ' ha');
        
         if(chooseCost > 0){
             $(this).closest('li').find(".catProdAttributeItem select>option:eq(1)").prop('selected', true); 
         } if (chooseCost > 59){
             $(this).closest('li').find(".catProdAttributeItem select>option:eq(2)").prop('selected', true); 
         } if (chooseCost > 199){
             $(this).closest('li').find(".catProdAttributeItem select>option:eq(3)").prop('selected', true); 
         } if (chooseCost > 999){
             $(this).closest('li').find(".catProdAttributeItem select>option:eq(4)").prop('selected', true); 
         }
             
        var cost = $(this).closest('li').find("select option:selected").text().replace(/.*\$/, '');
        $(this).closest('li').find(".total").text('$' + cost * quantity);
    
    }
});