JSFiddle - React, Tailwind, and code Playground

by Reddy Prasad Andhe

HTML

<div class="div-split">
  <div class="handle-counter rpHandleCounter" id="counter1" data-class="clas-1">
    <button class="counter-minus btn btn-primary">-</button>
    <input type="text" value="200">
    <button class="counter-plus btn btn-primary">+</button>
  </div>

  <div class="handle-counter rpHandleCounter" id="counter2" data-class="clas-2">
    <button class="counter-minus btn btn-primary">-</button>
    <input type="text" value="200">
    <button class="counter-plus btn btn-primary">+</button>
  </div>

  <div class="handle-counter rpHandleCounter" id="counter3" data-class="clas-3">
    <button class="counter-minus btn btn-primary">-</button>
    <input type="text" value="200">
    <button class="counter-plus btn btn-primary">+</button>
  </div>

  <div class="tableData">
    <table width="100%" border="0">
      <tr>
        <td class="col-1 clas-1 cls-com" width="200">
          Column 1
          <div id="col1Value"></div>
        </td>
        <td class="col-2 clas-2 cls-com" width="150">
          Column 2
          <div id="col2Value"></div>
        </td>
        <td class="col-3 clas-3 cls-com" width="250">
          Column 3
          <div id="col3Value"></div>
        </td>
      </tr>
    </table>
  </div>
</div>

CSS

.handle-counter { overflow: hidden;margin-top:10px; }

.handle-counter .counter-minus,  .handle-counter .counter-plus,  .handle-counter input {
  float: left;
  text-align: center;
}

.handle-counter .counter-minus,  .handle-counter .counter-plus { text-align: center; }

.handle-counter input {
  width: 50px;
  border-width: 1px;
  border-left: none;
  border-right: none;
  height:26px;
  border:1px solid #ccc;
}

.btn {
  padding: 6px 12px;
  border: 1px solid transparent;
  color: #fff;
  cursor:pointer;
}

.btn:disabled, .btn:disabled:hover {
  background-color: darkgrey;
  cursor: not-allowed;
}

.btn-primary { background-color: #009dda; }

.btn-primary:hover, .btn-primary:focus { background-color: #0486b9; }

body{font-family:Verdana, Arial;font-size:13px;}
.tableData{margin-top:20px;}
.tableData table, .tableData td{border:1px solid #000;border-collapse:collapse;}
.tableData td{padding:0px;}

JavaScript

/* Plugin starts */
;(function () {
  'use strict';
  var maxVal = 600;
  var inputLength = $('.rpHandleCounter input').length - 1
  $.fn.handleCounter = function (options) {
    var $input,
        $btnMinus,
        $btnPlugs,
        minimum,
        maximize,
        writable,
        onChange,
        onMinimum,
        onMaximize;
    var $handleCounter = this
    $btnMinus = $handleCounter.find('.counter-minus')
    $input = $handleCounter.find('input')
    $btnPlugs = $handleCounter.find('.counter-plus')
    var defaultOpts = {
      writable: true,
      minimum: 1,
      maximize: null,
      onChange: function(){},
      onMinimum: function(){},
      onMaximize: function(){}
    }
    var settings = $.extend({}, defaultOpts, options)
    minimum = settings.minimum
    maximize = settings.maximize
    writable = settings.writable
    onChange = settings.onChange
    onMinimum = settings.onMinimum
    onMaximize = settings.onMaximize
    if (!$.isNumeric(minimum)) {
      minimum = defaultOpts.minimum
    }
    if (!$.isNumeric(maximize)) {
      maximize = defaultOpts.maximize
    }
    var inputVal = $input.val()
    if (isNaN(parseInt(inputVal))) {
      inputVal = $input.val(0).val()
    }
    if (!writable) {
      $input.prop('disabled', true)
    }

    changeVal(inputVal)
    $input.val(inputVal)
    $btnMinus.click(function () {
      var num = parseInt($input.val())
      if (num > minimum) {
        $input.val(num - 1)
        changeVal(num - 1)
        if($('.div-split').length > 0) {
          splitDiv($handleCounter,num-1)
        }
      }
    })
    $btnPlugs.click(function () {
      var num = parseInt($input.val())
      if (maximize==null||num < maximize) {
        $input.val(num + 1)
        changeVal(num + 1)
        if($('.div-split').length > 0) {
          splitDiv($handleCounter,num+1)
        }
      }
    })
    var keyUpTime
    $input.keyup(function () {
      clearTimeout(keyUpTime)
      keyUpTime = setTimeout(function()...