A little javascript help

On my form, I have a field for contact name and another for email. I then have a java controlled button and if clicked, it should popup another field for contact and and another for email, side, by side, If the button is clicked again, two more popup, etc.

Here is the javascript that I am using and the corresponding button :
<script type="text/javascript">
function addsupplier_email() {

input.setAttribute("type","text");
input.setAttribute("name","supplier_email");
input.setAttribute("required","yes");
input.setAttribute("size","30");
input.setAttribute("maxlength","200");
document.getElementById("additional_email").appendChild(input);
document.getElementById("additional_email").appendChild(document.createElement("br"));
input.focus();
}
</script>

<div id="additional_contact">
<input type="button" value="Add Additional Supplier Contact" onclick="addsupplier_email();" />
</div>

The problem that I am having is that this works fine for just one field, but when I copy the javacode and try to add two fields, it does not seem to work. It will just add fields across instead of the next rowl.

Can somebody please help me fix the code ?

Thanks