JSFiddle - React, Tailwind, and code Playground

by Lan Jiang

HTML

<div>
CREATE A FORM
<hr>
<label>label name</label>
<input id="lable_name" type="text">
<button id="btn_lable_name">OK</button>
<label>input id</label>
<input id="input_id" type="text">
<button id="btn_input_id">OK</button>
<hr><br>
</div>
<div id="form"></div>

JavaScript

function info (message){
  	var info = message;
  	$('#form').append(info);
    $('input').focus(function (){
    	info.remove();
    });
};
var labelExist = [];
var inputExist = [];

// click on the label ok
$('#btn_lable_name').click(function (){
	var input = $('#lable_name').val();
	if(!($('#lable_name').val())){
  	info($('<p>can not create empty content</p>'));
  }else if(labelExist.indexOf(input) > -1){
  	info($('<p><font color="red">' + input + '</font> exist already, can not create duplicate content</p>'));
  }else{
    var label = '<label class="' + input + '">' + input + '</label><br>';
    $('#form').append(label);
    $('#lable_name').val('');
    labelExist.push(input);
  };
});

// click on the input ok
$('#btn_input_id').click(function (){
	var label_class = $('#form>label[class="' + $('#input_id').val() + '"]').attr('class');
  var input = $('#input_id').val();
  // if there isn't label name
	if($('#form').text() == ''){
  	info($('<p>create a label first</p>'));
  // if input is empty
  }else if(!input){
  	info($('<p>can not create empty content</p>'));
  // if input is not matched label class
  }else if(label_class !== input){
  	info($('<p>input id and lable name non matched, enter the same id as the lable name</p>'));
  }else if(inputExist.indexOf(input) > -1){
  	info($('<p><font color="red">' + input + '</font> exist already, can not create duplicate content</p>'));
  }else{
    var myString = '<input id="' + input + '">';
    $(myString).insertAfter('label[class="' + input + '"]');
    $('#input_id').val('');
    inputExist.push(input);
  };
});