JSFiddle - React, Tailwind, and code Playground

HTML

<input name="filter[0]" value=""   onchange="APP.func.start()" onkeyup="APP.func.start()">
<input name="filter[1]" value=""   onchange="APP.func.start()" onkeyup="APP.func.start()">
<input name="filter[2]" value="" onchange="APP.func.start()" onkeyup="APP.func.start()">
<div>
  <span id="s0"></span>
  <span id="s1"></span>
  <span id="s2"></span>
</div>

<script>
function classApp()
{
var root  = this;
this.name = 'classApp';
this.func = {};
this.vars = {};

this.func.zobraz = function(table)
	{
	var i;
	for (i=0; i<table.length; i++)
		{
		document.write(i + ': ' + table[i].join(', ') + '<br>');
		}
	document.write('<br><br>');
	}

this.func.tableFilter = function(table, filter)
	{
	var i, j, table2, bool, a, b;
	table2 = [];
	for(i=0; i<table.length; i++)
		{
		bool = true;
		for(j=0; j<filter.length; j++)
		        {
        		a = filter[j][1].toUpperCase();
		        b = table[i][filter[j][0]].toUpperCase();
		        if (a=='')
				{
				continue;
				}
		        if (b.indexOf(a)==-1) // b.indexOf(a) = hledej v B text v A // v c# mozna neco jako search nebo strpos
				{
				bool = false;
				break;
				}
		        if (b.indexOf(a)!==0 )
				{
				bool=false;
				break;
				}
		        }
		if (bool===true)
			{
			table2[table2.length] = table[i];
			}
		}
	return table2;
	}

this.func.getInput = function(column)
	{
	var query = 'input[name="filter['+column+']"]';
	return document.querySelector(query).value;
	}

this.func.setInput = function(column, value)
	{
	var query = 'input[name="filter['+column+']"]';
	document.querySelector(query).value = value;
	}

this.func.start = function()
	{
	var table, table2, filter;
	table = [
		// jmeno, stat, mesto
		['Tomas', 'Cesko'    , 'Zlin'   ],
		['Petr' , 'Cesko'    , 'Ostrava'],
		['Libor', 'Slovensko', 'Kosice' ]
		];
	filter = [	// poradi sloupcu je podle toho, jak potrebujes serazovat
		// sloupec, text
//		[1, 'ce'],
//		[0, ''  ]
		[1, root.func.getInput(1)],
		[0,...