JSFiddle - React, Tailwind, and code Playground

by ConnorM

HTML

<div id="btnContainer">
    <div class="btn"><a href="#sam">sam button</a>
    </div>
    <div class="btn"><a href="#sam2">sam2 button</a>
    </div>
    <div class="btn"><a href="#sam3">sam3 button</a>
    </div>
    <div class="btn"><a href="#sam4">sam4 button</a>
    </div>
    <form>
        <input id="thumbnailSelection" type="hidden" name="Selection" value="not selected" />
        <input id="submitbtn" type="submit" value="Submit" />
    </form>
</div>

CSS

.btn {
    width:100px;
    height:100px;
    background: yellow;
    float:left;
    cursor:pointer;
}
#btnContainer {
    width:400px;
    height:200px;
    margin:2em auto;
}

JavaScript

$(function () {
    
    var valueRegistered = null; // Define your variable here first 

    $(".btn").click(function () {

        $(".btn").css({
            "background": "yellow"
        });
        $(this).css({
            "background": "red"
        });
        console.log(valueRegistered)
        valueRegistered = $(this).find("a[href]").attr('href').replace('#', '');
        $("#thumbnailSelection").attr('value', valueRegistered);
        console.log(valueRegistered)

    });


    $('form').submit(function (e) {
        alert(valueRegistered)
        return false;
    });

});