JSFiddle - React, Tailwind, and code Playground
HTML
<form id="cadUsuario" action="" method="post">
<label>UF:</label><input type="text" name="uf" id="nome" />
<label>Cliente:</label><input type="text" name="cliente"/>
<br/><br/>
<input type="button" value="Salvar" id="salvar" />
</form>
<table id="results">
<thead>
<tr>
<td>UF</td>
<td>Cliente</td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
CSS
thead {
font-weight: bold;
}
thead td:first-child {
width: 30px;
}
tbody td:last-child {
display: none;
}
tbody tr.show td:last-child {
display:block
}
JavaScript
/// Quando usuário clicar em salvar será feito todos os passo abaixo
$('#salvar').on('click',function() {
var dados = $('#cadUsuario').serializeObject();
$.ajax({
type: 'POST',
dataType: 'json',
url: 'salvar.php',
sync: true,
data: dados,
success: function(response) {
// Levando em consideração que o 'responde' é um
// json { "success": true/false } conforme seu código.
// Se o .php retornar um json com success == true
if(response.success) {
$("#results tbody").append('<tr><td>'+dados.uf+'</td><td>'+dados.cliente+'</td></tr>')
}
}
});
return false;
});
// Exibir o cliente ao clicar na UF
$("#results").on('click','tbody td:first-child',function() {
$(this).parent().toggleClass('show');
});
// Função para serializar o formulário como um objeto ao invés de string.
$.fn.serializeObject = function(){
var obj = {};
$.each( this.serializeArray(), function(i,o){
var n = o.name,
v = o.value;
obj[n] = obj[n] === undefined ? v
: $.isArray( obj[n] ) ? obj[n].concat( v )
: [ obj[n], v ];
});
return obj;
};