Reestruturar divs via jQuery

[webcaju 0]

Olá Pessoal, estou tentado reestruturar umas divs de um formulário, eu até consegui algo mas ele tem agrupado ao invés de criar novas divs, veja abaixo:

 

Formulário original:

<div id="cck1r_cod_pac" class="cck_forms cck_site cck_text cck_cod_pac">
	<div id="cck1r_label_cod_pac" class="cck_label cck_label_text">
		<label for="cod_pac">Código do Paciente</label>
	</div>
	<div id="cck1r_form_cod_pac" class="cck_form cck_form_text">
		<input type="text" id="cod_pac" name="cod_pac" value="" class="inputbox text" size="9" maxlength="10">
	</div>
</div>
<div id="cck1r_nome_pac" class="cck_forms cck_site cck_text cck_nome_pac">
	<div id="cck1r_label_nome_pac" class="cck_label cck_label_text">
		<label for="nome_pac">Nome</label>
	</div>
	<div id="cck1r_form_nome_pac" class="cck_form cck_form_text">
		<input type="text" id="nome_pac" name="nome_pac" value="" class="inputbox text" size="64" maxlength="255">
	</div>
</div>
<div id="cck1r_sobrenome_pac" class="cck_forms cck_site cck_text cck_sobrenome_pac">
	<div id="cck1r_label_sobrenome_pac" class="cck_label cck_label_text">
		<label for="sobrenome_pac">Sobrenome</label>
	</div>
	<div id="cck1r_form_sobrenome_pac" class="cck_form cck_form_text">
		<input type="text" id="sobrenome_pac" name="sobrenome_pac" value="" class="inputbox text" size="64" maxlength="255">
	</div>
</div>

Existem mais campos mas com esses 4 campos já da para explicar.

 

A nova estrutura que eu quero seria essa:

<div class="col-xs-2">
	<div class="form-group">
		<label for="cod_pac" class="control-label">Código do Paciente</label>
		<div>
			<input type="text" id="cod_pac" name="cod_pac" value="" class="inputbox text form-control" size="9" maxlength="10">
		</div>
	</div>
</div>

<div class="col-xs-2">
	<div class="form-group">
		<label for="nome_pac" class="control-label">Nome</label>
		<div>
			<input type="text" id="nome_pac" name="nome_pac" value="" class="inputbox text form-control" size="64" maxlength="255">
		</div>
	</div>
</div>

<div class="col-xs-2">
	<div class="form-group">
		<label for="sobrenome_pac" class="control-label">Sobrenome</label>
		<div>
			<input type="text" id="sobrenome_pac" name="sobrenome_pac" value="" class="inputbox text form-control" size="64" maxlength="255">
		</div>
	</div>
</div>

Eu consegui atualizar essa estrutura mas ele tem agrupado dessa forma vejam:

<div class="col-xs-2">
	<div class="form-group">
		<label for="cod_pac" class="control-label">Código do Paciente</label>
		<label for="nome_pac" class="control-label">Nome</label>
		<label for="sobrenome_pac" class="control-label">Sobrenome</label>
		<div>
			<input type="text" id="cod_pac" name="cod_pac" value="" class="inputbox text form-control" size="9" maxlength="10">
			<input type="text" id="nome_pac" name="nome_pac" value="" class="inputbox text form-control" size="64" maxlength="255">
			<input type="text" id="sobrenome_pac" name="sobrenome_pac" value="" class="inputbox text form-control" size="64" maxlength="255">
		</div>
	</div>
</div>

O código que atualizou a estrutura é esse:

				var item_label = '';
				var item_input = '';
				$('.cck_page_form .cck_forms .cck_label').each( //aqui colocar a estrutura antiga
				function() {
					item_label += $(this).html();
				});
				$('.cck_page_form .cck_forms .cck_form').each( //aqui colocar a estrutura antiga
				function() {
					item_input += $(this).html();
				});
				$('.cck_page_form').html("<div class='col-xs-2'><div class='form-group'>"+item_label+"<div>"+item_input+"</div></div></div>"); //aqui coloca a nova estrutura
				$('#system').addClass('control-label');
				$('label').addClass('control-label');
				$('input').addClass('form-control');

Eu imagino que entraria um loop para gerar as divs separadamente, mas até agora não tive sucesso, será que alguém que manje mais poderia dar um help.

 

Agradeço a todos pela ajuda.