JSFiddle - React, Tailwind, and code Playground

by der_robert

HTML

<section>                                        
    <label class="label">Bild</label>
    <div class="superbox col-sm-12">
        <div class="superbox-list">
            <img class="superbox-img" title="Holz" alt="100 x 100 px" data-img="http://placekitten.com/100/100" src="http://placekitten.com/100/100" data-imageid="1">
            <input style="display:block" id="bild_1" name="image_id" type="radio" value="1">
        </div>
        <div class="superbox-list">
            <img class="superbox-img" title="Ton" alt="80 x 106 px" data-img="http://placekitten.com/80/60" src="http://placekitten.com/80/60" data-imageid="2">
            <input style="display:block" id="bild_2" name="image_id" type="radio" value="2">
        </div>
        <div class="superbox-list">
            <img class="superbox-img" title="Katze" alt="100 x 100 px" data-img="http://placekitten.com/100/100" src="http://placekitten.com/100/100" data-imageid="3">
            <input style="display:block" id="bild_3" name="image_id" type="radio" value="3">
        </div>
        <div class="superbox-list">
            <img class="superbox-img" title="Grosses Bild" alt="560 x 1099 px" data-img="http://placekitten.com/560/1099" src="http://placekitten.com/560/1099" data-imageid="4">
            <input style="display:block" id="bild_4" name="image_id" type="radio" value="4">
        </div>
        <div class="superbox-float"></div>
    </div>
    <div class="superbox-show" style="height: 300px; display: none;"></div>
</section>

JavaScript

$("img").on("click",function(){
    var id = $(this).data("imageid");
    $("#bild_"+id).prop( "checked", true );
});