how to open multiple textboxes on a click using ajax - php

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.