JSFiddle - React, Tailwind, and code Playground

by terby

HTML

<form id="totoform" class="totofromcss" action="#">
                            <p>
                                <span class="colorcss">TOTO :</span>
                                <span class="colorcss" style="color:black" id="showTote"></span>
                                <button class="add_field_button">Koşu Ekle</button>
                                <button style="float:right;margin-right:5px;display:none" class="remove_field ">Koşu Sil</button>
                            </p>
                            <br>
                            <div id="nextRace">
                                <div id="1">
                                    <span class="colorcss">1.Koşu Derecesi :</span>
                                    <input style="width:140px" type="number" max="5" min="0" maxlength="1" required="" name="nextRace[]" placeholder="Tabela durumu giriniz !">
                                </div>
                            </div>
                            <p>
                                <span class="colorcss">Kalan Koşu Sayısı :</span>
                                <span class="colorcss" style="color:black" id="RemaNumber"></span>
                            </p>
                            <p>
                                <input type="submit" value="Hesapla">
                            </p>
                        </form>
                        <input id="TOTO" type="hidden" value="21114220112-143103230">

JavaScript

function KalanKosuHesapla() {
      var e = [],
        a = $("#TOTO").val();
      $("input[name='nextRace[]']").each(function() {
        a += $(this).val()
      });
      for (var n = 20, t = 0, i = 0, l = 0, o = 0; o < a.length; o++) "-" != a[o] && e.push(a[o]);
      for (o = e.length - 1; o > -1; o--) {
        l++, n--;
        var r = e[o];
        if (1 == r) {
          i = 0, t = 0, n = 20 - l + 1;
          break
        }
        if (2 == r) {
          if (i++, 2 == ++t) {
            t = 0, n = 20 - l + 1;
            break
          }
          if (4 == i) {
            n = 20 - l + 1, i = 0;
            break
          }
        }
        if ((3 == r || 4 == r || 5 == r) && 4 == ++i) {
          n = 20 - l + 1, i = 0;
          break
        }
      }
      $("#RemaNumber").html(n)
    }

    function KalanKosuHesaplaDefault() {
      for (var e = $("#TOTO").val(), a = [], n = 20, t = 0, i = 0, l = 0, o = 0; o < e.length; o++) "-" != e[o] && a.push(e[o]);
      for (o = a.length - 1; o > -1; o--) {
        l++, n--;
        var r = a[o];
        if (1 == r) {
          i = 0, t = 0, n = 20 - l + 1;
          break
        }
        if (2 == r) {
          if (i++, 2 == ++t) {
            t = 0, n = 20 - l + 1;
            break
          }
          if (4 == i) {
            n = 20 - l + 1, i = 0;
            break
          }
        }
        if ((3 == r || 4 == r || 5 == r) && 4 == ++i) {
          n = 20 - l + 1, i = 0;
          break
        }
      }
      $("#RemaNumber").html(n)
    }
    $(document).ready(function() {
      var e = $("#nextRace"),
        a = $(".add_field_button"),
        n = 1;
      $(a).click(function(a) {
        a.preventDefault(), 4 == n ? alert("Maximum yarış sayısına ulaştınız!") : n < 4 && 4 != n && ($(".remove_field").css("display", "block"), n++, $(e).append("<div id=" + n + '><span class="colorcss">' + n + '.Koşu Derecesi :</span> <input  style="width:140px"  type="number" max="5" min="0" maxlength="1"...