Ajuda em CSS e JavaScript

[fmbp]

Boas,
Estou aqui com um problema com o css. Passo a explicar:
Tenho um pedaço de código HTML do qual quero fazer clone, para poder adicionar/remover esses mesmos campos usando javascript, para aparecer apenas o código inicial apenas uma vez, tenho de fazer no início da div um "style="display:none", caso contrário duplica-me automaticamente o código a clonar, mas ao fazer isso não me mostra o calendário que tenho num input em parte do código.
Aqui fica parte do código:
HTML:

<div id="professional" style="display:none"> <!-- se tirar este style, duplica-me o código, e o calendário funciona, mas só pretendo a duplicação caso o utilizador carregue em adicionar -->

<!-- Código a clonar -->
​

<input type="button" value="Remover" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
<label for="datai">Data de inicio:&nbsp;</label>
<input class="calendarSelectDate" name="datai[]" id="datai"/> <!-- Ao carregar no input deveria aparecer um calendário -->
<label for="dataf">Data de fim:&nbsp;</label>
<input class="calendarSelectDate" name="dataf[]" id="dataf"/>
<!-- Fim do código a clonar -->
​

</div>
<span id="prof"></span>
<input type="button" id="profissao" value="Adicionar" />

JavaScript:

var counterp = 0;
function initexp()
{

document.getElementById('profissao').onclick = profissao;
profissao();
​

}

function profissao()
{

counterp++;
var newFields = document.getElementById('professional').cloneNode(true);
newFields.id = '';
newFields.style.display = 'block';
var newField = newFields.childNodes;
for (var i=0;i<newField.length;i++)
​

{
​

var theName = newField.name
if (theName)
​

newField.name = theName + counterp;​

}
​

var insertHere = document.getElementById('prof');
insertHere.parentNode.insertBefore(newFields,insertHere);
}

window.onload = profissao;

Espero que me possam ajudar, não estou a encontrar solução para o meu problema.
Desde já o meu obrigado.