JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form">
  <div class="item">
    <div class="success"></div>
    <ul class="errorMessages"></ul>
    <label>
      <input required class="input" name="first" type="text" placeholder="first">
    </label>
    <label>
      <input required class="input" name="second" type="text" placeholder="second">
    </label>
    <button type="submit">Create</button>
  </div>
  <div class="item">
    <div class="success"></div>
    <ul class="errorMessages"></ul>
    <label>
      <input required class="input" name="first_2" type="text" placeholder="first">
    </label>
    <label>
      <input required class="input" name="second_2" type="text" placeholder="second">
    </label>
    <button type="submit">Create</button>
  </div>
</div>

JavaScript

$(document).ready(function() {
  var $items = $(".item");
  $items.each(function() {
    var $this = $(this);
    var $input = $this.find(".input");
    var inputCheck = function() {
      var errorList = $("ul.errorMessages", $this);
      var inputError = function() {
        errorList.empty();
        $this.find(":invalid").each(function(index, node) {
          var label = $(node).attr("name");
          var message = node.validationMessage || "Invalid value.";
          errorList
            .show()
            .append(
              "<li><span>" + label + ": " + "</span>" + message + "</li>"
            );
        });
      };
      $("input[type=submit], button", $this).on("click", inputError);
    };
    inputCheck();
  });
});