JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div class="row ap-pax">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Items - <span class="count-pax">1 Chocolate</span></a>
          <ul class="dropdown-menu" id="myform">
            <li>
              <input type='button' value='-' class='paxminus' field='Chocolates' />
              <input type='text' name='Chocolates' value='1' class='pax' size="3" maxlength="2" data-max="6" data-min="1" id="pax" disabled/>
              <input type='button' value='+' class='paxplus' field='Chocolates' />
              <b>Chocolates</b> 
            </li>
            <li>
              <input type='button' value='-' class='paxminus' field='Vanillas' />
              <input type='text' name='Vanillas' value='0' class='pax' size="3" maxlength="2" data-max="6" data-min="0" id="pax" disabled />
              <input type='button' value='+' class='paxplus' field='Vanillas' />
              <b>Vanillas</b>
            </li>
            <li>
              <input type='button' value='-' class='paxminus' field='Dark Currents' />
              <input type='text' name='Dark Currents' value='0' class='pax' size="3" maxlength="2" data-max="6" data-min="0" id="pax" disabled />
              <input type='button' value='+' class='paxplus' field='Dark Currents' />
              <b>Dark Currents</b>
            </li>                        
          </ul>
      </div>

CSS

.ap-pax {
    position: relative;
    width:300px;
    height: 100px;
    border: 1px solid #111;
      text-align: center;
      text-decoration: none;
    margin: 0 auto;
      margin-top: 10px;
    
    }
#myform {
    text-align: left;
    padding: 10px;
    border: 1px dotted #ccc;
    /*margin: 2%;*/
    top:20px;width:100%;
}

#myform li {
  padding: 5px 0;
}

.pax {
    width: 25px;
    height: 25px;
    text-align: center;
}
input.paxplus { width:25px; height:25px; margin-right: 10px;}
input.paxminus { width:25px; height:25px;}

.dropdown-menu {
  min-width: 248px;
}
input, button, select, textarea {
  line-height: normal;
}

JavaScript

jQuery(document).ready(function(){
    
    // This button will increment the value
    $('.paxplus').click(function(e){
        // Stop acting like a button
        e.preventDefault();

        // Get the field name
        fieldName = $(this).attr('field');
        // Get its default input
        var defaultInp = jQuery('input[name='+fieldName+']');
        // Get its min value
        var minVal = jQuery('input[name='+fieldName+']').data('min');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If is not undefined
        if (!isNaN(currentVal)) {
            // Increment
            if(defaultInp.val()<jQuery(defaultInp).data('max'))
                 //if I put "var _val = " here
                //I get - [object Object] Chocolate. Why?
              $('input[name='+fieldName+']').val(currentVal + 1);
              //save for display in ext div  
              var _val = currentVal+1;
              //show in div
              $(".count-pax").text(_val+' '+fieldName);
              console.log(currentVal);
            if(defaultInp.val()==jQuery(defaultInp).data('max'))
              $(this).prop('disabled', true);
              $(".paxminus").removeAttr("disabled");
        } else {
            // Otherwise put a 0 there

            $('input[name='+fieldName+']').val(0);
        }
    });
    // This button will decrement the value till 0
    $(".paxminus").click(function(e) {
        // Stop acting like a button
        e.preventDefault();

        // Get the field name
        fieldName = $(this).attr('field');
        // Get its default input
        var defaultInp = jQuery('input[name='+fieldName+']');
        // Get its min value
        var minVal = jQuery('input[name='+fieldName+']').data('min');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If it isn't undefined or its greater than 0
        if (!isNaN(currentVal)...