JSFiddle - React, Tailwind, and code Playground

by Sajeetharan Sinnathurai

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<html>
<head>
<title>Input Number Incrementer</title>
</head>
<body>
<label>
Count all1 Traveller(s)
<input onblur="findTotal()"  type="text" class="main" value="1" placeholder="" />
</label>
<br/><br/>
<label>
Adults
<input onblur="findTotal()"  type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
 <ul class="button-group button-click">
  <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
  <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
  </ul>
  </label>
  
  <label>
  Children 
  <input onblur="findTotal()"  type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
   <ul class="button-group button-click">
  <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
  <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
  </ul>
  </label>
  
  
    <label>
   Infants  
    <input type="text" class="cat_textbox" id="CAT_Custom_410672" name="CAT_Custom_410672" maxlength="4000" value="0" />
   <ul class="button-group button-click">
  <li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
  <li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
  </ul>
  </label>
  <label>
   TOTAL  
  <input type="text" class="total" value="1" placeholder="" />
  </label>
  </body>

</html>

JavaScript

function findTotal(){
    var arr = document.getElementsByName('qty');
    var tot=0;
    for(var i=0;i<arr.length;i++){
        if(parseInt(arr[i].value))
            tot += parseInt(arr[i].value);
    }
    document.getElementById('total').value = tot;
}

$(function() {
$(".button-click a").on("click", function() {

  var $button = $(this);
  var oldValue = $button.closest("ul").prev().val();

  if ($button.text() == "+") {
      var newVal = parseInt(oldValue) +1;

    } else {
   // Don't allow decrementing below zero
    if (oldValue > 0) {
      var newVal = parseInt(oldValue - 1);
    } else {
      newVal = 0;
    }
  }
  $button.closest("ul").prev().val(newVal);
   
})
});