JSFiddle - React, Tailwind, and code Playground

by anndreyy

HTML

<body>
    <div class = "formInner">
        <input type ="text" name = 'item1' value ="teste 01">
        <select name ='item2'>
            <option selected> banana </option>
            <option> banana 2 </option>
        </select>
    </div>
</body>

JavaScript

$(document).ready(function(){
	//Grava o valor anterior do campo
		$( "input, select" ).focus(function(){            

			//Grava o atual valor em um atributo atributo
			var anterior = $(this.tagName + "[name="+ this.name +"][data-anterior]");			

			//Se o atributo não existe, ele é criado
			if(!anterior.length){
				$(this).attr('data-anterior', this.value);
			}
		}).change(function(){			

			//Define as variaveis
			var value = this.value;
			var anterior = $(this.tagName + "[name="+ this.name +"][data-anterior]").attr('data-anterior');
			var name = this.name;
			var elemento = $( "input[name=log_" + name + "]" );			

			console.log("value:", value, "anterior:", anterior);
			//Verifica se já não existe um elemento de log
			if( elemento.length ){

				//Verifica se o novo valor alterado não é o valor antigo
				if( value !== anterior ){
					elemento.val( value ).attr( 'data-anterior', anterior ).toggleClass('log_inativo log');
				}else{
					//Então remove
					elemento.toggleClass('log log_inativo');
				}
			}else{ //Se não existe ele cria
				$( ".formInner" ).append( "<input type = 'hidden' class = 'log' name = 'log_" + name + "' value = '" + value + "' data-anterior = '" + anterior + "'>" );
			}			
			
		})
})