Php generating divs, then hiding all the divs - php

Question

Everything works except for the hide portion. I'm simply trying to hide each div as it is being generated, and I need to get control of the divs as well. So I'm guessing that the div id part is very wrong when I'm trying to increment. Please help!
<?php
$counter=0;
foreach ($foo as $key => $value){
$counter++;
?>
<div id="ad<?php $counter;?>">
<?php include("showPage.php");?>
</div>
<script>$("#ad<?php $counter;?>").hide();</script>
<?php
}
?>
Second part of question:
<script>
$(document).ready(function(){
$("#FooButton").click(function(){
if($('div#ad1').is(':visible')){
$("div#ad1").hide();
$("div#ad2").show();
}
});
});
</script>

Answer 1

Yes you need to echo the value like this
echo $counter;

Answer 2

You need to echo out the value of $counter.
Here:
<div id="ad<?php echo $counter;?>">
<?php include("showPage.php");?>
</div>
<script>
$(document).ready(function(){
$("#ad<?php echo $counter;?>").hide();
});
</script>
Update:
After looking at the above solution, I cannot recommend you calling $(document).ready() in a loop. A more efficient solution to this would be to add style display: none to the generated div and not use the javascript here, like follows:
<div id="ad<?php echo $counter;?>" style="display:none;">
<?php include("showPage.php");?>
</div>