JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.phuketfr.com/js/jquery.jqtransform.js"></script>
<link rel="stylesheet" href="http://www.phuketfr.com/css/jqtransform.css">
<form>
    <div id="map-view-container">
        <div id="map-container">
            
            <img src='http://www.phuketfr.com/img/map/transparentMap.gif' width='120' height='220' border='0' alt='' usemap='#regionMapView' class='map' />
            
            <map name="regionMapView"  id="regionMapView">
                <area alt="Bang Tao" href="#ban" id="ban" coords="25,100,20" shape="circle">
                <area alt="Chalong" href="#cha" id="cha" coords="59,187,22" shape="circle">
                <area alt="East" href="#eas" id="eas" coords="71,-1,121,138" shape="rect">
                <area alt="Kamala" href="#kam" id="kam" coords="17,127,16" shape="circle">
                <area alt="Karon" href="#kar" id="kar" coords="22,182,14" shape="circle">
                <area alt="Kata" href="#kat" id="kat" coords="29,196,12" shape="circle">
                <area alt="Kathu" href="#kth" id="kth" coords="53,140,20" shape="circle">
                <area alt="Nai Narn" href="#nai" id="nai" coords="32,213,15" shape="circle">
                <area alt="Talang" href="#tal" id="tal" coords="57,93,20" shape="circle">
                <area alt="North" href="#nor" id="nor" coords="0,0,70,85" shape="rect">
                <area alt="Patong" href="#pat" id="pat" coords="20,154,21" shape="circle">
                <area alt="Phuket City" href="#phu" id="phu" coords="88,173,32" shape="circle">
                <area alt="Rawai" href="#rai" id="raw" coords="58,230,32" shape="circle">
            </map>
            
            
            
            <img width="120" height="220" alt="" src="http://www.phuketfr.com/img/map/phuket-phu-active.png" class="region phu-map ">
            <img width="120" height="220" alt="" src="http://www.phuketfr.com/img/map/phuket-cha-active.png" class="region cha-map ">
            <img...

CSS

.clearboth {clear: both;}
#map-view-container {position: relative;}
#map-container {float: left;}
#map-view-container img.map {position: relative; z-index: 100;}
#map-view-container img.regionBg {left: 0px; position: absolute;    top: 0px; z-index: 19;}
#map-view-container img.region {display: none;    left: 0px;    position: absolute;    top: 0px;    z-index: 20;}
#locmap label { display: inline; cursor:pointer;}
#regionMapView {z-index:400;}

#locmap label {}

#map-view-container img.selected {display:inline; }
#map-view-container img.unselected {display:none; }
#locmap a.jqTransformCheckbox {}

.form-row {
    padding-left:10px;
}
.form-row label {
    float:left;
    clear:both;
}

.jqTransformHidden { display:hidden;}

JavaScript

$(function() {
    $('form').jqTransform({
        imgPath: 'img/'
    });

    //Better to cache these selectors if we are using them more than once
    var jqCheckbox = $('.jqTransformCheckbox');
    var maps = $('#map-container AREA');

    //Unbind the default behaviour set by jqTransform
    jqCheckbox.unbind('click');

    //Rebind it with our modified behaviour
    jqCheckbox.click(function(evt) {
        var jqTrans = $(this).toggleClass('jqTransformChecked');
        //It would be faster to use an id selectors #id instead of a class selectors .id here 
        var checkbox = jqTrans.next('input[type=checkbox]');
        $('.' + checkbox.prop('id') + '-map').toggleClass('selected'); // img select
        checkbox.prop('checked', !checkbox.prop('checked'));
    });

    maps.click(function(evt) {
        evt.preventDefault();

        var id = $(this).prop('id');
        $('.' + id + '-map').toggleClass('selected'); // img select
        $('.' + id + '-link').toggleClass('jqTransformChecked'); // a. tickbox
        //Limit to checkboxes because map share same id
        var checkbox = $('input[type=checkbox][id=' + id + ']');
        checkbox.prop('checked', !checkbox.prop('checked'));
    });

    maps.hover(function(evt) {
        $('.' + $(this).prop('id') + '-map-hover').toggleClass('selected'); // img hover
        //Uncomment if you want tickbox selected
        //$('.' + $(this).prop('id') + '-link').toggleClass('jqTransformHover') // checkbox
    });

    //Replace with .srow
    //Better to use id selector here i.e. div id=srow
    $('.form-row label').hover(function(evt) {
        var id = $(this).find('input').prop('id');
        $('.' + id + '-map-hover').toggleClass('selected'); // img hover
        //Uncomment if you want tickbox selected
        // $('.' + id + '-link').toggleClass('jqTransformHover') // checkbox
    });

    $('.form-row input[type=checkbox]').change(function(evt) {
        var map = $('.' + $(this).attr('id') + '-map'); //...