how to show/hide divs when divs are created dynami

Question

I am developing comment systems with two level of replay to the comments and I have a problem with how to show and hide divs .., because it's id's are different .., I tried in a way with:

<button>replayl</button>

<span style="display:none;">
   <form action='' method='post' name="addcmt" onsubmit="return validate()">
        <textarea rows="1" cols="60" name='textarea1' id='textarea1' onKeyDown="limitText(this.form.textarea1,this.form.countdown,300);" 
                                  onKeyUp="limitText(this.form.textarea1,this.form.countdown,300);">
       </textarea>
       <br>
       <br>
       <input type="hidden" name="level1" id="level1" value="commtlevel1" />
       <input id='addcmt' type='submit' value='Add reply' name='submit'/> 
   </form>
</span>

and jquery:

 <script>
     $("button").click(function () {
        $("span").show();                 
     });
</script>

but this way when I click reply button it shows all the span tag contente.., I wanna kow how I show one tag only or a way to my work done.

Answer 1

After edited question, i suggest you use div instead of span (because of display inline vs block).

$("button").click(function () {
    $(".myform").toggle('slow');
});

would do the job how you want.Here is the result.

Answer 2

As there is no button in your HTML, it's partly a guess. But the following code will toggle the visibility of the span immediately following your button :

 $(document.body).on("click", "button", function () {
      $(this).next("span").toggle();
 });

Note that you'd better define some classes to make the selector more selective :

 $(document.body).on("click", "button.toggler", function () {
      $(this).next("span").toggle();
 });