<script>
<!-- javascript function to load up the new input fields -->
var id = 1;
function addRequirement()
{
var obj = document.getElementById("req");
var data = obj.innerHTML;
if (id == 2){

}else {

data += "<input class = 'editprofileinputbox' type='text' name ='requirement_new'><input class='editprofileinputbox' type ='text' name ='requirementtype_new'><br/><br/>";

obj.innerHTML = data;
id++;

<?php
$updateRequirementsNewCounter++;
?>
}
}
function subtractRequirement()
{
var obj = document.getElementById("req");
var data = obj.innerHTML;
data = "" ;
obj.innerHTML = data;
id = 1;
<?php
$updateRequirementsNewCounter = 1;
?>
}
</script>

<script>
var publicationid = 1;
function addPublication()
{
var obj = document.getElementById("pub");
var data = obj.innerHTML;
if (publicationid == 2){

}else {

data += "<h1 style = 'color:white;'>test</h1>";

obj.innerHTML = data;
publicationid++;

<?php
$updatePublicationsNewCounter++;
?>
}
function subtractPublication()
{
var obj = document.getElementById("pub");
var data = obj.innerHTML;
data = "" ;
obj.innerHTML = data;
publicationid = 1;
<?php
$updatePublicationsNewCounter = 1;
?>
}
</script>


i have these two scripts in the header....

when i take off the second one the first one works.
the second one will not work when i take off the first one....

how can I replicate the first script and use again and again by changing the getElementbyID()