JSFiddle - React, Tailwind, and code Playground

by csornmo

HTML

<div class="value-content">
  <button class="plus">
    +
  </button>
  <div class="value">
  0
  </div>
  <button class="minus">
    -
  </button>
</div>

<div class="value-content">
  <button class="plus">
    +
  </button>
  <div class="value">
  0
  </div>
  <button class="minus">
    -
  </button>
</div>

<div class="value-content">
  <button class="plus">
    +
  </button>
  <div class="value">
  0
  </div>
  <button class="minus">
    -
  </button>
</div>

CSS

.value-content {
  display: inline-flex;
  margin: 20px;
  width: 100px;
}

.value {
  margin: 10px;
  
}

button {
  display: none;
}

JavaScript

var value = 0;
$('.plus').on("click", function(){

	var value = $(this).closest('.value-content').find('.value').text();
  value++;
	  
  $(this).closest('.value-content').find('.value').text(value);
  
});


$('.minus').on("click", function(){
	
  var value = $(this).closest('.value-content').find('.value').text();

  
	if ( value > 0 ) {
  	value--;
  }
  
  $(this).closest('.value-content').find('.value').text(value);
  

});

$('.value').on("click", function(){
	$(this).closest('.value-content').find('button').toggle().closest('.value-content').siblings().find('button').hide();
});



$(document).mouseup(function (e) {
    var container = $(".value-content"); // Give you class or ID

    if (!container.is(e.target) &&            // If the target of the click is not the desired div or section
        container.has(e.target).length === 0) // ... nor a descendant-child of the container
    {
        container.find('button').hide();
    }
});