JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
<form action="#">
<div>
 <input type="text" minlength="5" data-error="#error1">
    <div id="error1">error1</div>
</div>
<div>
 <input type="text" minlength="5" data-error="#error3">
    <div id="error3">error3</div>
</div>
   
</form>

<form action="#">
    <input type="text" minlength="5" data-error="#error2">
</form>

<div id="error2">error2</div>

CSS

#error1 {
    background: red;
    height: 20px;
}

#error2 {
    background: #0ff;
    height: 20px;
}
#error3 {
    background: green;
    height: 20px;
}

form {
    margin: 20px 0;
    border: 1px solid #000;
    padding: 10px;
}

JavaScript

console.clear();
$("form").each(function() {

    $(this).validate({
        debug: true,
        errorPlacement: function(error, el) {
        debugger;
            var container = $(el).data("error");
            var $containerElement = $(container);
            $containerElement.append(error);
        }
    });

});