JSFiddle - React, Tailwind, and code Playground

by caiocafardo

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

	<form accept-charset="UTF-8" id="nomes" action="javascript:enviaNomes()" method="post">
		<label>
			NOME
		</label>
		<input value="" type="text" name="nome" id="nome">
		<button name="submit" type="submit">
			alimenta
		</button>
	</form>
	<br><br>
	<div style="float: left;">
		NOMES ĂšNICOS
		<div id="nomes_unicos">

		</div>
	</div>
	<div style="float: left; width: 1px; height: 200px; margin-left: 20px; margin-right: 20px; background-color: #000000;"></div>
	<div style="float: left;">
		NOMES TOTAIS
		<div id="nomes_totais">

		</div>
	</div>

JavaScript

var nomeUnico = [];
var nomeTotal = [];
this.enviaNomes = function () {
	var nomeRecebido = $('#nome').val();
	$('#nome').val('');
	if(nomeUnico.indexOf(nomeRecebido) == -1){
		nomeUnico.push(nomeRecebido);
	}
	nomeTotal.push(nomeRecebido);
	var recebeUnico = '';
	for (var i=0; i < nomeUnico.length; i++) {
		recebeUnico += nomeUnico[i]+'<br>';
		$('#nomes_unicos').html(recebeUnico);
	}
	var recebeTotal = '';
	for (var i=0; i < nomeTotal.length; i++) {
		recebeTotal += nomeTotal[i]+'<br>';
		$('#nomes_totais').html(recebeTotal);
	}
}