JSFiddle - React, Tailwind, and code Playground

HTML

<fieldset>
  <legend>User Details</legend>
  <table>
    <tr>
      <td width="200"><label for="user"><span class="required-fields">*</span> User Name</label></td>
      <td><input type="text" id="user" class="name-input"></td>
      <td><p class="validation-error">This field cannot be blank or less than 2 characters.</p></td>
    </tr>
    <tr>
      <td><label for="job_title"><span class="required-fields">*</span> Job Title</label></td>
      <td><input type="text" id="job_title" class="name-input"></td>
      <td><p class="validation-error">This field cannot be blank or less than 2 characters.</p></td>
    </tr>
    <tr>
      <td><label for="full_name">* Full Name</label></td>
      <td><input type="text" id="full_name" class="name-input"></td>
      <td><p class="validation-error">This field cannot be blank or less than 2 characters.</p></td>
    </tr>
  </table>

</fieldset>

JavaScript

$(document).ready(function(){
    $('.validation-error').hide();
    $('.name-input').on("focus", function(){
     $(this).closest('.validation-error').show();
    });
  });