JSFiddle - React, Tailwind, and code Playground

HTML

<svg height="100" width="100" viewBox="429 303 193 136">
<path d="m 525 304c 53.3 0 96.1 12.7 96.1 28.6 l 0 78
c 0 15.8 -42.9 28.6 -96.1 28.6 -53.3 0 -96.1 -12.7 -96.1 -28.6 l 0 -78 c 0 -15.8 42.9 -28.6 96.1 -28.6 z" pathLength="25" id="123" class="seat" data-seat="123"
 data-state="open" />
 </svg>
<hr>
<div id="statusBox"></div>

CSS

.seat{
    fill:green;
}
.taken{
  fill:red;
}

JavaScript

$(".seat").click(function (event) {
           var result = $(this).data("seat");
           var state = $(this).data("state");
           $(this).removeClass( "seat" ).addClass( "taken" );
           result = result +" - "+ state;
           $("#statusBox").html(result);
                         
           });