<?php $max_no_boxes=10; ?> <script type="text/javascript"> function addnames() { document.getElementById("totalnames").value = Number(document.getElementById("totalnames").value) + Number(1); if(Number(document.getElementById("totalnames").value)>= Number(<?php echo $max_no_boxes ?>)){ document.getElementById("totalnames").value=<?php echo $max_no_boxes ?>; document.getElementById("nameButton").style.display="none"; } document.getElementById("name"+document.getElementById("totalnames").value) .style.display="block"; } function removenames() { document.getElementById("name"+document.getElementById("totalnames"). value).style.display="none"; document.getElementById("totalnames").value = Number(document.getElementById("totalnames").value) - Number(1); if(Number(document.getElementById("totalnames").value)< Number(<?php echo $max_no_boxes ?>)) document.getElementById("nameButton").style.display="block"; } </script> <table> <tr> <td valign="top">Name</td> <td valign="top"> <div class="project_right"> <?php for($i=2;$i<=$max_no_boxes;$i++) { $nameValue = "name".$i; ?> <div style="display:<?php echo $totalnames>= $i ?"block":"none"; ?>" id="name<?= $i ?>"> : <input type="text" name="name<?= $i ?>" class="projectText" value="<?php echo $$nameValue ?>"> <a href="javascript:return false;" onClick="javascript:removenames();">Remove</a> </div> <?php } ?> <div style="width:175px;; clear: left; float:left">: <input type="text" name="name1" class="projectText" value="<?php echo $name1 ; ?>"> </div> <div style="width:20px; clear: none; float:left"> <a id="nameButton" href="javascript:return false;" onClick="javascript:addnames();">Add</a> </div> <input type="hidden" id="totalnames" name="totalnames" value="<?php echo $totalnames==""?1:$totalnames; ?>" /> </div> </td> </tr> </table>