JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td>
            Price: <span class="price">$12.00</span>
            Quantiy: 
              <select name="q1" id="q1" class="quantity">
                <option>0</option>
                  <option>1</option>
                <option>2</option>    
                <option>3</option>    
                <option>4</option>  
            </select>
            <b>Total: <span class="total"></span></b>
            </td>
        </tr>
    <tr>
        <td>
            Price: <span class="price">$13.00</span>
            Quantiy: 
              <select name="q2" id="q2" class="quantity">
                <option>0</option>
                  <option>1</option>
                <option>2</option>    
                <option>3</option>    
                <option>4</option>  
            </select>
            <b>Total: <span class="total"></span></b>
            </td>
        </tr>
</table>

JavaScript

/*Function to call when drop down with class quantity changes*/
        $(".quantity").change(function(){  

             //Get value from dropdown changed
             var quantity = parseFloat($(this).val()); 

             //Get text from sibling element with class price and clean it
             var price = $(this).siblings(".price").html();
             //Clean it
             price = price.replace("$","").replace(",",""); 
             /*Make it a number*/
             price = parseFloat(price);

             var total = price * quantity;

             /*the b tag is the sibling but we want to update the inner element
             with class total*/
            $(this).siblings("b").children(".total").html("$" +  total); 

           });