Enviar dado de um input para outro

Bom dia,

Estou montando um registro de historico, o qual está localizado dentro de um form de cadastro. Dentre essas informações de cadastro, possuimos um registro de historico, que deverá funcionar da seguinte forma:

• Um select, onde escolho o tipo de historico
• Uma textarea onde faço a descrição do historico desejado.(Ex: Tipo: Documento. Assunto:faltou a entrega do documento.)
• Um botão "Adicionar".

*Ao clicar nesse adicionar, o valor escolhido no tipo de historico deve ser inserido em um input ou div que está logo ao lado, como uma grade de visualização, possibilitando assim, que sejam inseridos diversos historicos para o mesmo cadastro.

*O cadastro e todos os registros do historico, somente serão gravados no banco, quando for acionado o submit principal do form, o qual está direcionado para o action do form, realizando assim o insert.

• Alguem sabe como montar o javascript para que o valor escolhido no select tipo seja transferido para uma div ou input ao lado(na msma pagina, enfileirando como uma lista de historicos adicionados)?
• O assunto descrito, precisará ficar armazenado em uma variavel php para que possa ser feito o insert do msmo no momento adequado..

Vou colocar abaixo a ideia visual do que descrevi:

<style>

.hist_adicionado{
	border:1px solid #bbb;
	width:460;
	height:100;
	float:right;
	margin-top:-100;
	padding-top:4;
}

.tipo_adicionado{
	border:1px solid #bbb;
	width:190;
	height:20;
	float:left;
	text-align:center;
	margin-left:35;
}

.data_adicionado{
	border:1px solid #bbb;
	width:90;
	height:20;
	float:left;
	text-align:center;

}

.hora_adicionado{
	border:1px solid #bbb;
	width:80;
	height:20;
	float:left;
	text-align:center;
}

#btn_add_hist{margin-left:373px;}

</style>

<fieldset class="field_hist">
<legend>Histórico</legend>

<label for="tipo_hist">Tipo:</label>

<div style="float:left;margin-left:0;">
<select name="tipo_hist" id="tipo_hist">
<option>tipo1</option>
<option>tipo2</option>
</select>
</div><!--end_float_tipo-->

<div style="float:left;margin-left:0;">
<label for="data_hist">Data:</label>
<input type="text" name="data_hist" id="data_hist" size="10" disabled />
</div><!--end_float_data-->

<div style="float:left;margin-left:0;">
<label for="hora_hist">Hora:</label>
<input type="text" name="hora_hist" id="hora_hist" size="10" disabled />
</div><!--end_float_hora-->

<br>
<br>

<label for="assunto_hist">Assunto:</label>
<textarea name="assunto_hist" id="assunto_hist" cols="47" rows="4">
</textarea>
<br>
<button type="button" id="btn_add_hist" name="btn_add_hist"> Adicionar > </button>

<div class="hist_adicionado">

<div class="tipo_adicionado">Tipo Histórico</div>
<!--<div id="tipo_add"></div>-->

<div class="data_adicionado">Data</div>
<!--<div id="data_add"></div>-->

<div class="hora_adicionado">Hora</div>
<!--<div id="hora_add"></div>-->

</div><!--end_hist_adicionado-->

</fieldset><!--end_fieldset_historico-->

Utilizei um script como exemplo, que está quase como preciso, vejam:

<style type="text/css">
 .aprovado{
 background-color: #060;
 color: #FFFFFF;
 }
 .reprovado{
 background-color: #f22;
 color: #E2E2E2;
 }
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
 $(function(){

 $("#btn").click(function(){

 $("#resposta").removeClass();

 var nome = $("#txtnome").val();
 var n1 = parseFloat ($("#txtn1").val());
 var n2 = parseFloat ($("#txtn2").val());

 var media = (n1 + n2) / 2;
 $("#resposta").html(nome + ", " + media);

 if(media >= 7){
 $("#resposta").addClass("aprovado");
 }else{
 $("#resposta").addClass("reprovado");
 }

 });

 });
</script>
<h3>Ver Dados do Aluno</h3>
<form>
 Nome: <input type="text" name="nome" id="txtnome" />
 <br /><br />
 Nota1: <input type="text" name="n1" id="txtn1" />
 <br /><br />
 Nota2: <input type="text" name="n2" id="txtn2" />
 <br /><br />
 <input type="button" value="Enviar Dados" id="btn" />
</form>
<div id="resposta"></div>

• Nesse caso tenho 3inputs text onde posso informar qualquer dado e ao clicar no submit, os mesmos são exibidos na div id="resposta".
• O problema é que se eu escrevo outra coisa e clico no submit novamente, o resultado na div id="resposta" é substituído.
• Alguém saberia como incrementar esse script, possibilitando que as informações exibidas na div id="resposta" fossem acrescentadas uma abaixo da outra ao invés de substituídas?