JSFiddle - React, Tailwind, and code Playground

by Hans PUFAL

HTML

<label for="ABC">LABEL1</label>
<input type="text" id="ABC" class="hideLabel" />
<label for="DEF">LABEL2</label>
<input type="text" id="DEF" class="hideLabel" />

JavaScript

(function () {
    "use strict"

    function toggle(ev) {
        var lab = document.querySelector('label[for="' + this.id + '"]');
        lab && (lab.style.display = ev.type == 'blur' ? '' : 'none');
    }

    [].forEach.call(document.querySelectorAll('.hideLabel'), function (el) {
        if (el.id && document.querySelector('label[for="' + el.id + '"]')) {
            el.addEventListener('focus', toggle, false);
            el.addEventListener('blur', toggle, false);
        }
    });
})();