JSFiddle - React, Tailwind, and code Playground

by juristr

HTML

<div>
    <label>Team 1</label>
    <button class="js-expand">+</button>
    <button class="js-collapse">-</button>
    <div class="subsection">
      <div>
          <label>Red</label>
          <button class="js-incr">+</button>
          <input type="text" value="0" class="small js-inc-result" />
          <button class="js-decr">-</button>
          <input type="text" class="small js-result" />
      </div>
    </div>
</div>
<div>
    <label>Team 2</label>
</div>
<div>
    <label>Team 3</label>
</div>
<div>
    <label>Team 4</label>
</div>

CSS

.subsection {
    padding-left: 15px
}

.small {
    width: 50px;
}

JavaScript

$(function(){
    $('.js-expand').click(function(){
        $(this).parent('div').find('.subsection').show(); 
    });
    
    $('.js-collapse').click(function(){
       $(this).parent('div').find('.subsection').hide(); 
    });
    
    $('.js-incr').click(function(){
       var currentValue = $(this).parent('div').find('.js-inc-result').val();
       currentValue = parseInt(currentValue, 10) + 1;
       $(this).parent('div').find('.js-inc-result').val(currentValue);
    });
    
    
    $('.js-decr').click(function(){
       var currentValue = $(this).parent('div').find('.js-inc-result').val();
       currentValue = parseInt(currentValue, 10) - 1;
       $(this).parent('div').find('.js-inc-result').val(currentValue);
    });    
    
});