creating a dynamic page in javascript

Question

hi there guys I have a very important question - I have created this dynamic page that allows me to add multiple tables or forms for users to fill out. It's done dynamically through Javascript/AJAX. With that being said and done, there is a drop down menu that I call and another drop down menu pops up from the tags that have been specified. However, when I try and do this dynamically by trying to pop up on the new table - I get nothing showing up. Can anyone please help me figure out what is going on? I am sooo... confused!

I have an image attached as well along with the code(s) posted below.enter image description here

As one can see - the box that I need to have show up with the drop down menu is highlighted as a "Debtor Region" in the first image. The second image shows how the Selection Menu for the "Select Debtor Country or Economic Zone" asks the user to "Please Select A Region". That field appears only when the top drop down menu makes a selection. enter image description here

The Code I have used to dynamically call the function is as follows:

    function showRegions2(str2)
    {
    if (str2=="")
      {
      document.getElementById("getregions2").innerHTML="";
      return;
      }
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("getregions2").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","getregions2.php?k="+str2,true);
    xmlhttp.send();
    }

This function takes place only during an onchange call. The code for that is as follows: 

    <table id="debtroeconomiczone" style="width:100%"><tr> <td>
        <label>Select Debtor Country or Economic Zone </label></td>
        <td><label>
        <select id="debtoreconomiczone" name="debtoreconomiczone[]" onchange="showRegions2(this.value)">
<option><?php if(isset($_POST['debtoreconomiczone'])) { echo $_POST['debtoreconomiczone']; } else { echo "-Please Make A Selection-";} ?></option>
<?php
if(!isset($_GET['id2']))
{
$_GET['id2']="";
}

$sql1a = "SELECT * FROM economiczone ORDER BY economiczone asc";
$smt11a = $dbs->prepare($sql1a);
$smt11a -> execute();
while($row1a=$smt11a->fetch(PDO::FETCH_ASSOC))
{
if($row1a['economiczone']==$_GET['id2'] )
echo ("<option selected value='$row1a[economiczone]'>$row1a[economiczone]</option>");
else
echo ("<option value='$row1a[economiczone]'>$row1a[economiczone]</option>");

}

?>
</select></label></td></tr></table>

When I call the javascript function - this is the code that I use:

    var td2d = document.createElement("td");
    td2d.valign = "top";

    var slct1 = document.createElement("select");
    slct1.id = "debtoreconomiczone";
    slct1.name = "debtoreconomiczone[]";

<?php
     $sql1a = "SELECT * FROM economiczone ";
    $smt1a = $dbs->prepare($sql1a);
    $smt1a -> execute();
    while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
    {
        echo("var opt=document.createElement(\"option\");\r\n");
        echo("opt.value='$row1a[economiczone]';\r\n");
        echo("opt.text ='$row1a[economiczone]';\r\n");
        echo("slct1.appendChild(opt);");
    } 
?>
    slct1.onchange = "showRegions2(this.value)";
    slct1.value='<?php echo $_GET['id2']; ?>';   

    claims.appendChild(slct1);

    td2d.appendChild(slct1);

    tr2.appendChild(td2d);

The Debtor Region area that I had highlighted has the following code which returns null - with no drop downs at all!



     var td4c = document.createElement("td");           
        var slct4 = document.createElement("select"); 

        slct4.id = "debtorregion";
        slct4.name = "debtorregion[]";
        slct4.onchange="showRegions2(this.value)"

    <?php

       $sql22a = "SELECT * FROM regions JOIN economiczone WHERE economiczone.economiczone = regions.region";
        $smt122a = $dbs->prepare($sql22a);
        $smt122a -> execute();
        while($row1a=$smt122a->fetch(PDO::FETCH_ASSOC))
        {
            echo("var opt=document.createElement(\"option\");\r\n");
            echo("opt.value='$row1a[region]';\r\n");
            echo("opt.text ='$row1a[region]';\r\n");
            echo("slct4.appendChild(opt);");
        }  


    ?> 

        slct4.value='<?php echo $_GET['id2']; ?>';   
        claims.appendChild(slct4);
        td4c.appendChild(slct4);
        tr4.appendChild(td4c);

 I tried calling it dynamically through another method and this is the code I used but to no avail:

    var td4de = document.createElement("div");
    td4de.id = "getregions2";

    tr4.appendChild(td4de);
    var td4d = document.createElement("td");            
    var debtorpostalcode = document.createElement("input");
    debtorpostalcode.type = "text";
    debtorpostalcode.id = "debtorpostalcode";
    debtorpostalcode.name = "debtorpostalcode[]";
    debtorpostalcode.placeholder = "Debtor Postal/Zip Code";

    td4d.appendChild(debtorpostalcode);
    tr4.appendChild(td4d);

Please let me know how I can call the code dynamically by clicking the "Add Another CLaim [+]" Option as can be seen on here -

tinypic. com/view.php?pic=2rohwg6&s=9#.WbbCvMZLfDc