JSFiddle - React, Tailwind, and code Playground

by nickywaites

HTML

<ul>
    
    <li>
        <div class="menux">
            <div class="text-block">
                <div class="text-holder">
                    <h3>  Item Name </h3>
                    <p> Description </p>
                </div>
            </div>
            <div optionid="46812" class="price"> <strong>£4.90</strong> </div>
            <div class="add-item">  <a class="plus-link" href="#">plus</a>  </div>
        </div>
    </li>
    
    <li>
        <div class="menux">
            <div class="text-block">
                <div class="text-holder">
                    <h3> Item Name 2 </h3>                                                                                                      </h3>
                    <p> Description  </p>
                </div>
            </div>
        </div>
        <form class="menu-form" action="#">
            <fieldset>
                <a class="plus-link" href="#">plus</a>
                <select id="optionid" class="select">
                    <option value="1">9", £3.99</option>
                    <option value="2">12", £5.49</option>
                </select>
            </fieldset>
        </form>
    </li>
    
</ul>

JavaScript

$(document).ready(function() {
    $("li .plus-link").click(function(event) {
        event.preventDefault();
        var prev = $(this).closest('li').find('#optionid, .price');
        var OptionId = prev.val() || prev.attr('optionid');
        console.log(OptionId);
    });
});