JSFiddle - React, Tailwind, and code Playground

by WILLIAM CORREA

HTML

<form>
<fieldset>
 NOME DO PRODUTO: <input type="text" class="produto" id="produto" name="produto" />
 <br/>
 GRAMAS: <input type="number" class="gramas" id="gramas" name="gramas" /><br/>
 R$: <input type="number" class="preco" name="preco" id="preco"/>
 <input type="button" id="adicionar" value="Adicionar"> 
</fieldset> 
<div id="lista"></div>
</form>

JavaScript

document.getElementById('adicionar').addEventListener('click', adicionar);

function adicionar()
{
	const produto = document.getElementById('produto');
    const gramas = document.getElementById('gramas');
    const preco = document.getElementById('preco');
    
    const item = {
    	produto: produto.value,
        gramas: gramas.value,
        preco: preco.value
    };
    
    produto.value = '';
    gramas.value = '';
    preco.value = '';
    
    var iDiv = document.createElement('div');
    iDiv.innerHTML = '<div class="item">' + JSON.stringify(item) + '<input type="hidden" name="item[]" value="' + (JSON.stringify(item)) + '"/>' + '</div>';

    document.getElementById('lista').appendChild(iDiv);
}