JSFiddle - React, Tailwind, and code Playground

HTML

<form id="addToCart" class="trackForm" method="post" action="/socks/jmx">
                
    <div id="purchase" price=" $13.99 - $14.99">
        <ol>
            <li id="purchase_promotion" class="price" price=" $13.99 - $14.99">
                <label class="retailPrice required" for="purchase_promotion"></label>
                <span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                    <span itemprop="price"> $13.99 - $14.99</span>
                </span>
            </li>
            <li id="purchase_sizes" class="size">
                <label for="purchase_sizes" class="required">Shoe Size</label>
                <select id="purchase_sizes" name="purchase[sizes]" required="required" class="size">
                    <option value="">Choose a shoe size</option>
                    <optgroup value="0" label="men - us">
                        <option value="1">5.5 to 8.5 - $13.99</option>
                        <option value="2">9 to 12.5 - $13.99</option>
                        <option value="3">13 to 15 - $14.99</option>
                    </optgroup>
                    <optgroup  value="0" label="women - us">
                        <option value="4">6.5 to 10 - $13.99</option>
                        <option value="5">10.5 to 13 - $13.99</option>
                    </optgroup>
                </select>
            </li>
            <li id="purchase_color"><label for="purchase_color" class="required">Colors</label><select
                        id="purchase_color" name="purchase[color]" required="required">
                    <option value="">Choose your color</option>
                    <option value="93">White/platinum</option>
                    <option value="92">White/navy</option>
                </select></li>
            <li id="purchase_quantity"><label for="purchase_quantity" class="required">Quantity</label><select
                        id="purchase_quantity" name="purchase[quantity]"...