JSFiddle - React, Tailwind, and code Playground

by polaszk

HTML

<div id="divek"></div>

JavaScript

function createProductCodeForm(parent) {
  var form = $("<form/>");

  form.append($("<label>").text('Product Code:'));
  form.append($("<input>").attr('name', 'productCode').attr('type', 'text'));
  form.append($("<label>").attr('name', 'hint').text('The product code can be found on the label.').hide());

  form.append('<br>');

  form.append($("<input>").attr('type', 'submit'));
  
    parent.append(form);
  
  $('body').on('blur', 'input[name="productCode"]', function(e) {
    $('label[name="hint"]').hide();
  })
  
  $('body').on('focus', 'input[name="productCode"]', function(e) {
    $('label[name="hint"]').show();
  })
  
}

createProductCodeForm($('body #divek'));