如何使用ajax在单击上打开多个文本框

Question

<table>
  <tbody id="eb_body">
    <tr>
      <td>Booking Bills:</td>
      <td><input type="text" id="e_brochure0" name="e_brochure0" placeholder="From           Bill No........" required/></td>

    </tr>
    <tr>
      <td>
        <a onClick="add_brochures()" style="text-decoration:none !important;"><span style="cursor:pointer; font-size:10px; ">+Add more bill nos.</span></a>
      </td>
    </tr>

    <tr>
      <td>
        <input type="submit" value="save" name="save" />
      </td>
    </tr>
  </tbody>
</table>

there is an anchor tag on that click i am calling a function as below..

<script type="text/javascript">
var b=1;
function add_brochures()
{
    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("zone").innerHTML=xmlhttp.responseText;
        }
    }

    xmlhttp.open("GET","five.php",true);
    xmlhttp.send();
    b=b+1;

}
</script>

with this i am directing the page to five.php where i am displaying a select box....

code for five.php is this...

<?php
include 'dbcon.php';
$sql="select * from tb_zone";
$query=mysql_query($sql);
?> 
<tr>
<td>

<select>
<?php
while($row=mysql_fetch_array($query))
    {
        ?>
        <option>
        <?php echo $row["zone_name"]; ?>
        </option>
        <?php } ?>
</select>

</td>
</tr>

when i click on anchor tag it is opening one selectbox but bot more....what i want is that when i click on anchor tag then a selectbox appears...if i click on it 5 times then i should open selectbox 5 times....right now it is opening just 1 selectbox....please help

Answer 1

Change:

document.getElementById("zone").innerHTML=xmlhttp.responseText;

to:

document.getElementById("zone").innerHTML += xmlhttp.responseText;

+= will concatenate the response to the existing HTML, which will add a new row to the table.