JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

Number inputs.
<br>
Mask: <div class='number-input'>
    <button class='stepDown'></button>
    <input id='select_msk' name='select_msk' type='number' min='0' max='2' value='0'>
    <button class='stepUp'></button>
</div>
<br>
Colourpoint: <div class='number-input'>
    <button class='stepDown'></button>
    <input id='select_cp' name='select_cp' type='number' min='0' max='2' value='0'>
    <button class='stepUp'></button>
</div>
<br>
Sooty: <div class='number-input'>
    <button class='stepDown'></button>
    <input id='select_sty' name='select_sty' type='number' min='0' max='4' value='0'>
    <button class='stepUp'></button>
</div>
<br>
Shadow: <div class='number-input'>
    <button class='stepDown'></button>
    <input id='select_sdm' name='select_sdm' type='number' min='0' max='1' value='0'>
    <button class='stepUp'></button>
</div>
<br>
Frost: <div class='number-input'>
    <button class='stepDown'></button>
    <input id='select_fr' name='select_fr' type='number' min='0' max='1' value='0'>
    <button class='stepUp'></button>
</div>
<br>
Snow: <div class='number-input'>
    <button class='stepDown'></button>
    <input id='select_snm' name='select_snm' type='number' min='0' max='1' value='0'>
    <button class='stepUp'></button>
</div>
<br>
Scramble: <div class='number-input'>
    <button class='stepDown'></button>
    <input id='select_scr' name='select_scr' type='number' min='0' max='9' value='0'>
    <button class='stepUp'></button>
</div>
<br>
Shadowback: <div class='number-input'>
    <button class='stepDown'></button>
    <input id='select_sbm' name='select_sbm' type='number' min='1' max='9' value='1'>
    <button class='stepUp'></button>
</div>
<br>
Merle: <div class='number-input'>
    <button class='stepDown'></button>
    <input id='select_mm' name='select_mm' type='number' min='1' max='9' value='1'>
    <button class='stepUp'></button>
</div>
<br>
Tobiano: <div class='number-input'>
    <button class='stepDown'></button>
    <input...

CSS

button, div, a {
    transition: 0.2s;
}

input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.number-input {
    border: 1px solid #c2c4c6;
    display: inline-flex;
}

.number-input,
.number-input * {
    box-sizing: border-box;
}

.number-input button {
    outline: none;
    -webkit-appearance: none;
    background-color: #eeeeee;
    border: none;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    cursor: pointer;
    margin: 0;
    position: relative;
    padding: 0;
}
.number-input button:hover {
    background-color: #ffcc33;
}

/* Create - and +  symbols */
.number-input button::before,
.number-input button::after {
    display: inline-block;
    position: absolute;
    content: '';
    width: 0.5rem;
    height: 2px;
    background-color: #212121;
    transform: translate(-50%, -50%);
}
.number-input button.stepUp::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.number-input input[type=number] {
    font-family: sans-serif;
    max-width: 3rem;
    padding: 0.3rem;
    border: 0;
    text-align: center;
    outline: none;
}

JavaScript

$('form').on('click', 'button:not([type="submit"])', function(e){
  e.preventDefault();
})

// Pretty +- buttons for number inputs.
$(".number-input .stepUp").click(function(){
     this.parentNode.querySelector('input[type=number]').stepUp();
});
$(".number-input .stepDown").click(function(){
    this.parentNode.querySelector('input[type=number]').stepDown();
});

const modifiers = [
    "fr", // Frost: 0 or 1 (if 0, off)
    "snm", // Snow: 0 or 1 (if 0, off)
    "sdm", // Shadow: 0 or 1 (if 0, off)
    "cp", // Colourpoint: 0 to 2 (if 0, off)
    "msk", // Mask: 0 to 2 (if 0, off)
    "scr", // Scramble: 0 to 9 (if 0, off)
    "sty", // Sooty: 0 to 4 (if 0, off)
    "mm", // Merle: 1 to 9
    "sbm", // Shadowback: 1 to 9
    "sab", // Sabino: 1 to 9
    "tob", // Tobiano: 1 to 9
    "spl" // Splash: 1 to 5
];

$("input").change(function(){
    let mods = {};
    for(let i = 0; i < modifiers.length; i++){
        let modName = modifiers[i];
        let value = $("#select_" + modName).val();
        mods[modName] = value;
    }
    $("#result").html(JSON.stringify(mods));
});