JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <ul>
        <li>
            <label>
                <input type="checkbox" name="drink[]" class="drink" value="DrinkName1" data-price="12" /> Sample Item
                <input min="0" max="5" type="number" class="quantity" name="quantity" value="1" />
            </label>
        </li>

        <li>
            <label>
                <input type="checkbox" name="drink[]" class="drink" value="DrinkName2" data-price="6" /> Sample Item
                <input min="0" max="5" type="number" class="quantity" name="quantity" value="1" />
            </label>
        </li>

        <li>
            <label>
                <input type="checkbox" name="drink[]" class="drink" value="DrinkName3" data-price="4" /> Sample Item
                <input min="0" max="5" type="number" class="quantity" name="quantity" value="1" />
            </label>
        </li>
    </ul>
</form>

<p>Total</p>
<div id="totalDiv">0</div>

JavaScript

$('.quantity, .drink').change(calculateTotal);

function calculateTotal() {
	var $form = $(this).closest('form'), total = 0;
    $form.find('.drink:checked').each(function() {
    	total += $(this).data('price') * parseInt($(this).next('.quantity').val() || 0, 10);
    });
    $('#totalDiv').text(total);
}