JSFiddle - React, Tailwind, and code Playground

by kkdaily

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4">
            <div class="print-container">
                <form class="margin-bottom-10">
                    <label for="">Name:</label>
                    <input type="text" />
                </form>
                <div class="item"></div>
                <div class="total"></div>
            </div>
        </div>
        <div class="col-sm-8">
            <div class="box">
                <div class="content">
                    <ul class="sub-menu">
                        <li><a href="#"><button class="menu item1">Item 1</button></a></li>
                        <li><a href="#"><button class="menu item2">Item 2</button></a></li>
                        <li><a href="#"><button class="menu item3">Item 3</button></a></li>
                    </ul>
                </div>
            </div><!--end box-->
        </div>
    </div>
</div>

CSS

li{
    list-style:none;
}
button{
    background-color:#006;
    color:#fff;
    width:100px;
    height:50px;
}

JavaScript

$(document).ready(function () {
  var total = 0;
  $('.item1').click(function(){
      total += 80;
     $('.item').html('<div class="skill">' + total + '</div><br/>');
  });
  $('.item2').click(function(){
      total += 90;
     $('.item').html('<div class="skill">' + total + '</div><br/>');
  });
  $('.item3').click(function(){
      total += 100;
     $('.item').html('<div class="skill">' + total + '</div><br/>');
  });
});