I have been creating a webpage for users to add status reports into my database from different projects they are working on. The webpage has the areas: Date, Name, Project Name, Project Number, Task (drop down menu with values that are queried from the database), and an accomplishments section. I want to have an add button and delete button that allow a user to add both the task drop down menu and accomplishments text area. Thus, making it so the user doesn't have to keep going to new pages or submitting and going back. Also, the task drop down menu has an "other" option that reveals a text box. I chose to do it this way because I couldn't figure out how to make it so the drop down menu was editable. But this isn't my problem.

My problem is that I have an add "link" and that replicates the two areas when the user clicks on it. However, when it replicates, I lose the other option. If the user chooses "other", nothing happens on the new task drop down menu.

Any help would be appreciated.

Code:
<body>
<?php

session_start();

$_SESSION['userid'] = $_POST['userid'];
$_SESSION['password'] = $_POST['password'];

$userid = $_SESSION['userid'];
$password = $_SESSION['password'];

$db_conn = pg_connect('dbname=postgres user=postgres password=**');
$query = "SELECT * FROM \"UserIDs\" WHERE \"UserIDs_UTable\"='$userid' AND \"Pswd_UTable\"='$password' ";

$result = pg_query($query);

if (pg_num_rows($result) > 0)
{
echo "Successfully logged in!<br/>";

$db_conn = pg_connect('dbname=postgres user=postgres password=**');
$queryname = "SELECT \"Name_UTable\" FROM \"UserIDs\" WHERE \"UserIDs_UTable\"='$userid'";
$resultname = pg_query($db_conn, $queryname);

if (!$resultname) 
{
 die("Error in SQL query: " . pg_last_error());
}

$resultname = pg_query($db_conn, $queryname);
$resultname = pg_fetch_row($resultname);

echo "Welcome ". $resultname[0] . ".<br/>";

?>

<form action="status.php" method="post">

<br>

Date of Status Report: <br>
<input name="date" type="text" id="textfield" value="<?php echo date("m/d/Y"); ?>" />
<p>

<!--Name is hidden but saved as 'Name'-->

<input type="hidden" name="Name" value="<?php echo $resultname[0]?>">

<p>

<!--Project Name shows up in the text box and can be editted.-->

<?php

$db_conn = pg_connect('dbname=postgres user=postgres password=**');
$queryproject = "SELECT \"ProjectName\" FROM \"StatusReports\" WHERE \"Name\"='$resultname[0]'";
$resultproject = pg_query($db_conn, $queryproject);
 if (!$resultproject) 
 {
  die("Error in SQL query: " . pg_last_error());
 }
 $resultproject = pg_fetch_row($resultproject);

?>

Project Name: <br> <input type="text" name="spname" value="<?php echo $resultproject[0]?>">
<p>

<?php

$db_conn = pg_connect('dbname=postgres user=postgres password=**');
$querynumber = "SELECT \"ProgramNumber\" FROM \"StatusReports\" WHERE \"Name\"='$resultname[0]' order BY \"Date\" desc LIMIT 1";
 $resultnumber = pg_query($db_conn, $querynumber);
 if (!$resultnumber) 
 {
  die("Error in SQL query: " . pg_last_error());
 }
 $resultnumber = pg_fetch_row($resultnumber);

?>

Program Number: <br> <input type="text" name="spnum" value="<?php echo $resultnumber[0]?>">

<div id="reports">
 <div>
  <label>Task 1: </label><br>
   <?php
    session_start();

    $dbh = pg_connect("host=localhost dbname=postgres user=postgres password=**");

    if (!$dbh)
    {
     die("Error in connection: " . pg_last_error());
    }
    else
    {   

     $tasktable = "SELECT \"pg_tables\".\"tablename\" FROM \"pg_tables\" WHERE \"pg_tables\".\"tablename\" = 'Jim Richardson'";
     $tasktableresult = pg_query($tasktable) or die('Query failed: ' . pg_last_error());
     if (pg_num_rows($tasktableresult) > 0)
     {  
  $query = "SELECT \"Task_TTable\" FROM \"Jim Richardson\"";
  $result = pg_query($query) or die('Query failed: ' . pg_last_error());

  //Start the select list

      echo '<select name=tasks id="select" onchange="show();">';
      echo '<OPTION value="" selected>Select a Task</OPTION>';

 while($row=pg_fetch_row($result))
 { 
  print("<option> $row[0]</option>");
 }
  ?>
   <option>Other Task</option>
    </select>
     <input type="text" name="tasks" id="text" style="visibility:hidden">
      <p>
  <?php
        }

        else
        {
        ?>
            <br> <input type="text" name="tasks">
        <?php
        }

    }
  ?>

    <label>Accomplishments: </label>
    <br> <textarea type="text" name="sacco" cols="50" rows="5" style="overflow: scroll; resize: none;"></textarea>       


    </div>

</div>
<div>
    <input type="submit" />
</div>
</form>

<?php
}
else
{
echo "Incorrect UserID and/or Password.";
}

?>
</body>

<head>
 <script>
  function show(){
     var op= window.document.getElementById('select');
     var selItem= op.options[op.selectedIndex].value;
     if(selItem=="Other Task"){
      document.getElementById('text').style.visibility = 'visible';
     }
     else{
      document.getElementById('text').style.visibility = 'hidden';
     }
    }
   </script>
  </head>

  <head>
   <script type="text/javascript" src="jquery-1.7.2.js"></script>
   <script type="text/javascript"> 

    var reports = document.getElementById('reports'), 
    add_link = document.createElement('a'),
    template = reports.getElementsByTagName('div'), 
    current = template.length,
    max = 20;

    template = template[0];

    add_link.href="*";
    add_link.innerHTML = 'Additional status reports'; 
    add_link.onclick = function () {
     var new_field = template.cloneNode(true);
     current += 1;
     new_field.innerHTML = new_field.innerHTML.replace(/1/g, current);
     reports.appendChild(new_field); 
     if (current === max) {
      add_link.onclick = null;
      document.body.removeChild(add_link);
     }
     return false;
    };
    document.body.appendChild(add_link); 
   </script> 
  </head>