JSFiddle - React, Tailwind, and code Playground

HTML

<form>
  <div style="position: absolute; left: 200px; " class="mesa">
    <input type="checkbox" id="m1" name="m301" value="200" />
    <label class="l1" for="m1"></label>
    <input type="checkbox" id="m2" name="m301" value="200" />
    <label class="l2" for="m2"></label>
    <input type="checkbox" id="m3" name="m301" value="200" />
    <label class="l3" for="m3"></label>
    <input type="checkbox" id="m4" name="m301" value="200" />
    <label class="l4" for="m4"></label>
    <input type="checkbox" id="m5" name="m301" value="200" />
    <label class="l5" for="m5"></label>
    <input type="checkbox" id="m6" name="m301" value="200" />
    <label class="l6" for="m6"></label>
  </div>

  <div style="position: absolute; left: 10px;">
    <div id="checkcount"></div>
    <div id="resultado_soma"></div>
    <div id="campo"></div>
  </div>

  <div style="position: absolute; left: 400px;">
    <br />
    <br />
    <input type="text" id="resultado_soma2" name="resultado_soma2" placeholder="Total" />
    <br />
    <input type="text" id="checkcount2" name="checkcount2" placeholder="N de cadeiras" />
    <br />

  </div>
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <br />
  <input type="submit" name="" value="pagar" />
</form>

CSS

.mesa input {
          visibility: hidden;
        }
        
        .mesa {
          position: relative;
          float: left;
          width: 140px;
          height: 140px;
          background: url('http://i.stack.imgur.com/MI8cD.png') no-repeat center center;
        }
        
        .mesa label {
          position: absolute;
          display: block;
          width: 36px;
          height: 32px;
          left: 50%;
          top: 50%;
          margin-left: -18px;
          margin-top: -16px;
          background: url('http://i.stack.imgur.com/27Y0g.png') no-repeat center top;
        }
        
        .mesa input:checked + label {
          background: url('http://i.stack.imgur.com/aHDoy.png') no-repeat center top;
        }
        
        .mesa span {
          position: absolute;
          display: block;
          left: 50%;
          top: 50%;
          -webkit-transform: translate(-50%, -50%);
          font: bold 15px Arial, Helvetica, sans-serif;
        }
        
        .l1 {
          -webkit-transform: translateY(-50px)
        }
        
        .l2 {
          -webkit-transform: rotate( 60deg) translateY(-50px)
        }
        
        .l3 {
          -webkit-transform: rotate(120deg) translateY(-50px)
        }
        
        .l4 {
          -webkit-transform: rotate(180deg) translateY(-50px)
        }
        
        .l5 {
          -webkit-transform: rotate(240deg) translateY(-50px)
        }
        
        .l6 {
          -webkit-transform: rotate(300deg) translateY(-50px)
        }
        
        .l7 {
          -webkit-transform: rotate(90deg) translateY(-50px)
        }
        
        .l8 {
          -webkit-transform: rotate(270deg) translateY(-50px)
        }

JavaScript

$(window).load(function(){
function contador() {
var n = $("input:checkbox:enabled:checked").length;
var unchecked = 0;
var cb = $(this).index();
$("input:checkbox:enabled").each(function(i) {
  if ((i < cb) && !($(this).is(":checked"))) {
    ++unchecked;
  }
})

  if($(this).is(":checked")){
    $('#campo').append('<div style="margin-top: 10px;"><input type="text" placeholder="Insira seu Ticket" name="tks[]" required  class="created" name="check1" ></div>');
  }else{
    $('.created').eq($(this).index(':checkbox')-unchecked).remove();
  } 

$("#checkcount").text(n + (n === 1 ) + " Cadeiras Marcadas");
};
contador();
$("input:checkbox").on("click", contador);


(function() {
    var elements = document.querySelectorAll("input[type='checkbox']");
    var resultado = document.getElementById('resultado_soma');
    var resultadoInput = document.getElementById('resultado_soma2');
    var checkCount = document.getElementById('checkcount2');
    
    var total = 0;
    
    for (var i = 0; i < elements.length; i++) {
        elements[i].onclick = function() {
            if (this.checked === false) {
                total = total - this.value;
            } else {
                total = total + parseFloat(this.value);
            }
            
            resultado.innerHTML  = 'R$ ' + total.toFixed(2).replace(".",",");
            resultadoInput.value  = total.toFixed(2).replace(".",",");
            checkCount.value =  $("input:checkbox:enabled:checked").length;
        }
    }
})();
$('form').submit(function(e){
	if($("input:checkbox:enabled:checked").length == 0){
  	e.preventDefault();
  }
})
});