JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<h1>Userinput</h1><input id="title" type="text" >


<input type="submit" value="Save/Show" onclick="clearAndShow('none')" />
<input type="button" value="clear" onclick='clearTitle()'/>
</div>
<h5>
2letter</h5><div id="display2letter">
</div>
<div id="one">
<input type="image" src="clear.jpg"  width="45" height="25" onclick="clearAndShow('clear1')"/>
</div>
<h5>3Letter</h5><div id="display3letter">
</div>
<div id="two">
<input type="image" src="clear.jpg"  width="45" height="25"  onclick="clearAndShow('clear2')"/>
</div>
<h5>4Letter</h5><div id="display4letter">
</div>
<div id="three">
<input type="image" src="clear.jpg"  width="45" height="25"  onclick="clearAndShow('clear3')"/>
</div>

CSS

#display2letter
{
width:150px;
height:50px;
background-color:grey;
box: 10px 10px 5px #888888;    
}
#display3letter
{
width:150px;
height:50px;
background-color:blue;
box: 10px 10px 5px #888888;
}
#display4letter
{
width:150px;
height:50px;
background-color:grey;
box: 10px 10px 5px #888888;
}

#one
{
position:fixed;
left:23%;
}
#two
{
position:fixed;
left:23%;
}
#three
{
position:fixed;
left:23%;
}

JavaScript

var titleInput  = document.getElementById("title");
var display2letter  = document.getElementById("display2letter");
var display3letter  = document.getElementById("display3letter");
var display4letter  = document.getElementById("display4letter");
var twoletter = [];
    var threeletter = [];
	var fourletter =[];
var flag1=0;
var flag2=0;
var flag3=0;


function clearAndShow (name) {
    // Split input box value by comma
    titles = titleInput.value.split(",");

    // Reset display divs
    display2letter.innerHTML = "";
    display3letter.innerHTML = "";
    display4letter.innerHTML = "";
    
    // Cache length so it's not recalculated on each iteration.
    var len = titles.length;

 
if(name == "clear1" && flag1 == 0)
{
twoletter = [];
flag1=1;
}
else if(name == "clear2" && flag2 == 0)
{
threeletter = [];

flag2=1;
}
else if(name == "clear3" && flag3 == 0)
{
fourletter = [];

flag3=1;
}
else
{
 for (i = 0; i < len; i++) {
        // Check for a-z, A-Z, 
        if (!titles[i].match(/^[a-zA-Z]/)) {
       throw error("Please use only alphabet letters");
         
        }

        // Dump into storage arrays.
        if(titles[i].length == 2) {
                twoletter.push(titles[i]);
        }
        else if(titles[i].length == 3){
            threeletter.push(titles[i]);
        }
		else if(titles[i].length == 4){	
		            fourletter.push(titles[i]);
        }
    }
}

    display2letter.innerHTML += "  "  + twoletter.join(", ") + "<br/>";
    display3letter.innerHTML += "  " + threeletter.join(", ") + "<br/>";
	display4letter.innerHTML += "  " + fourletter.join(", ") + "<br/>";
document.getElementById("title").value= "";
flag1=0;
flag2=0;
flag3=0;

}
function clearTitle(){

document.getElementById("title").value= "";
}