JSFiddle - React, Tailwind, and code Playground

by terby

HTML

<div class="divselector">
    <input type="submit" class="divselected" name="slctr" title="f" value="Futbol"></input>
    <input type="submit" class="divselect" name="slctr" title="b" value="Basketbol"></input>
</div>
<div class="football">
    <p>Futbol</p>
    <div class="match-row" name="macid1">
        <input type="submit" class="bttn" name="macid1" title="betopt1" value="1.25">
        <input type="submit" class="bttn" name="macid1" title="betopt2" value="1.35">
        <input type="submit" class="bttn" name="macid1" title="betopt3" value="-">
        <input type="text" name="macid11" size="1">
        <input type="text" name="macid12" size="2">
        <input type="text" name="macid13" size="2">
    </div>
    <div class="match-row" name="macid2">
        <input type="submit" class="bttn" name="macid2" title="betopt1" value="1.55">
        <input type="submit" class="bttn" name="macid2" title="betopt2" value="3.20">
        <input type="submit" class="bttn" name="macid2" title="betopt3" value="4.50">
        <input type="text" name="macid21" size="1">
        <input type="text" name="macid22" size="2">
        <input type="text" name="macid23" size="2">
    </div>
    <div class="match-row" name="macid3">
        <input type="submit" class="bttn" name="macid3" title="betopt1" value="1.55">
        <input type="submit" class="bttn" name="macid3" title="betopt2" value="3.20">
        <input type="submit" class="bttn" name="macid3" title="betopt3" value="4.50">
        <input type="text" name="macid31" size="1">
        <input type="text" name="macid32" size="2">
        <input type="text" name="macid33" size="2">
    </div>
    <div class="match-row" name="macid4">
        <input type="submit" class="bttn" name="macid4" title="betopt1" value="1.55">
        <input type="submit" class="bttn" name="macid4" title="betopt2" value="3.20">
        <input type="submit" class="bttn" name="macid4" title="betopt3" value="4.50">
        <input type="text"...

CSS

.bttn {
    width:40px;
    height:25px;
    background-color: #d1ec4c;
    border: 2px #d1ec4c outset;
    padding: 1px 4px;
    color: black;
    text-decoration: none;
    font: bold 90%"Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    outline:none;
    cursor: pointer;
}
.selected {
    width:40px;
    height:25px;
    background-color: #e3f48e;
    border: 2px #d1ec4c;
    border-style: inset;
    padding: 1px 4px;
    color: black;
    text-decoration: none;
    font: bold 90%"Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    outline:none;
    cursor: pointer;
}
.bttndisabled {
    width:40px;
    height:25px;
    background-color: #d1ec4c;
    border: 2px #d1ec4c outset;
    padding: 1px 4px;
    color: black;
    text-decoration: none;
    font: bold 90%"Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
    outline:none;
    opacity: 0.4;
}
.basketball {
    display:none;
}
.football {
    display:block;
}
.divselect {
    cursor:pointer;
    border:1px solid #EEE;
    background-color:#EEE;
    outline:none;
}
.divselected {
    cursor:pointer;
    border:1px solid green;
    background-color:green;
    outline:none;
}
.match-row {
    border: 1px solid black;
    background-color:#FFF;
}
.match-row-selected {
    border: 1px solid black;
    background-color:#EEE;
}
.coupon {
    width: 200px;
    height: 300px;
    border: 1px solid black;
    border-bottom:none;
}
.coupon-row {
    width:200px;
    height:50px;
    border-bottom: 1px solid black;
}
.match-table-container{
    width:85%;
    height:100%;
    float:left;
}
.cancel-this{
    width:15%;
    height:100%;
    float:right;
}
.coupon-table {
    border-collapse:collapse;
}
.coupon-table td {
    border:1px solid black;
    height:24px;
}
.match-code{
    width:25%;
}
.match-team-vs-team{
    width:25%;
}
.match-date-time{
    width:25%;
}
.blank-top {
    width:25%;
    height:50%;
}
.blank-bottom {
}
.match-guess{
   ...

JavaScript

$(document).ready(function () {
    var a = '-';
    $(":submit[value=" + a + "]").removeClass("bttn");
    $(":submit[value=" + a + "]").addClass("bttndisabled").attr('disabled', true);
});

$(':submit.bttn').click(function () {
    var group = ":submit[name='" + $(this).attr("name") + "']";
    var disabled = ":submit.bttndisabled";
    if ($(this).hasClass('bttn')) {
        $(this).removeClass('bttn').addClass('selected');
        $(group).not(this).not(disabled).removeClass('selected').addClass('bttn');
    } else {
        $(this).removeClass('selected').addClass('bttn');
        $(group).not(this).not(disabled).removeClass('selected').addClass('bttn');
    }
});

$(':submit.bttn').click(function () {
    var textfield1 = ":text[name='" + $(this).attr("name") + 1 + "']";
    var textfield2 = ":text[name='" + $(this).attr("name") + 2 + "']";
    var textfield3 = ":text[name='" + $(this).attr("name") + 3 + "']";
    var oran = this.value;
    var macid = this.name;
    var betoption = this.title;
    if ($(this).hasClass('selected')) {
        $(".match-row[name='" + $(this).attr("name") + "']").removeClass('match-row').addClass('match-row-selected');
        $(textfield1).val(oran);
        $(textfield1).addClass('oran');
        $(textfield2).val(betoption);
        $(textfield2).addClass('betoption');
        $(textfield3).val(macid);
        $(textfield3).addClass('macid');
    } else {
        $(".match-row-selected[name='" + $(this).attr("name") + "']").removeClass('match-row-selected').addClass('match-row');
        $(textfield1).val("");
        $(textfield1).removeClass('oran');
        $(textfield2).val("");
        $(textfield2).removeClass('betoption');
        $(textfield3).val("");
        $(textfield3).removeClass('macid');
    }
});

$(':submit.bttn').click(function () {
    var buttonclicked = ":submit.selected";
    var buttonnotclicked = ":submit.bttn:not(.selected)";
    var oran1 = $(':text.oran:eq(0)').val();
    var oran2 =...