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").on('click',function(e){
    var $this = $(this),
        $data = $this.data();
    
    $this.attr('class','taken');
    
    $("#statusBox").html($data.seat +" - "+ $data.state);
});