JSFiddle - React, Tailwind, and code Playground

by rajeevRF

HTML

<input type="text" name="haha"  id="X" >
<table>
<tr><td style="width: 5%;" class="haha"><svg class="teeth svg" id="svg"
 width="400px" height="300px" viewBox="0 0 400 300" preserveAspectRatio="xMidYMid meet">
    <!-- upper right 8 -->
    <g id="molar-group" class="molar">
        <rect x="75" y="75" stroke="black" id="disto-occlusal" style="stroke-width: 5px;" width="125" height="150" fill="white"/>
        <rect x="200" y="75" stroke="black" id="mesio-occlusal" style="stroke-width: 5px;" width="125" height="150" fill="white"/>
 </g>
 </svg></td></tr></table>

JavaScript

$(function() {
  $("#X").keyup(function() {
    if ($("#X").val() == 'X') {
      $(".haha").prop("disabled", true);
    } else {
      $(".haha").prop("disabled", false);
    }
  });
});