JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="name" name="name" />
<div id="error-div-1"></div>
<input type="text" id="hobbies" name="hobbies" />
<div id="error-div-2"></div>

JavaScript

/*function showError(i) {
    var errorDivID = "#error-div-" + i;

    if ($(this).val() === "") {
        $(errorDivID).html("Please enter something!");
    } else {
        $(errorDivID).html("");
    }
}

$("#name").on("blur", function () {
    showError.call(this, 1);
});

$("#hobbies").on("blur", function () {
    showError.call(this, 2);
});*/

/*$("#name, #hobbies").on("blur", function(){
     if($(this).val()==""){
           $(this).next('div').html("Please enter something!");
     } else {
           $(this).next('div').html("");
     }

  }); */

/*function showError() {

           if ($(this).val() === "") {
                $(this).next('div').html("Please enter something!");
            } else {
                $(this).next('div').html("");
            }
        }

        $("#name").on("blur", showError);

        $("#hobbies").on("blur", showError);*/

      function showError(i, element) {
            var errorDivID = "#error-div-" + i;

            if ($(element).val() === "") {
                $(errorDivID).html("Please enter something!");
            } else {
                $(errorDivID).html("");
            }
        }

        $("#name").on("blur", function() {
            showError(1, this);
        });

        $("#hobbies").on("blur", function() {
            showError(2, this);
        });