JSFiddle - React, Tailwind, and code Playground

HTML

<h4>Please select the number of people who will be in each room</h4>

<div class="cart-plus-minus">
  <button type="button" onclick="decrease('text')">-</button>
  <input type="number" id="text" value="1" min="1" data-max="2" readonly>
  <button type="button" onclick="increase('text')">+</button>
</div>

<div class="cart-plus-minus">
  <button type="button" onclick="decrease('text2')">-</button>
  <input type="number" id="text2" value="1" min="1" max="2" readonly>
  <button type="button" onclick="increase('text2')">+</button>
</div>

<div class="cart-plus-minus">
  <button type="button" onclick="decrease('text3')">-</button>
  <input type="text" id="text3" value="1" min="1" max="2" readonly>
  <button type="button" onclick="increase('text3')">+</button>
</div>
<a href="" class="a-link">
  <label> Group Total: </label>
  <input id="totalPersons" type="text" placeholder="" value="">
</a>

JavaScript

function updateTotal() {
  var textbox = document.getElementById("text");
  var textbox2 = document.getElementById("text2");
  var textbox3 = document.getElementById("text3");
  var total = document.getElementById("totalPersons");
  total.value = parseInt(textbox.value) + 
  parseInt(textbox2.value) + parseInt(textbox3.value);
}

function increase(id) {
  var textbox = document.getElementById(id);
  textbox.value++;
  updateTotal();
}
  

function decrease(id) {
  var textBox = document.getElementById(id);
  var a = textBox.value - 1;
  if (a >= 0) {
  	textBox.value = a;
  }
   updateTotal();
}