show and hide dynamic DIVs
<p>How can I show and hide the following  DIVs when radio button clicked?</p>

<pre><code>&lt;form name="form1" id="my_form" method="post" action=""&gt;
    &lt;div&gt;&lt;label&gt;&lt;input type="radio" id=radio1_1" name="radio_1" value="1"&gt;Yes&lt;/label&gt;
    &lt;label&gt;&lt;input type="radio" id=radio1_2" name="radio_1" value="2"&gt;Yes&lt;/label&gt;
    &lt;/div&gt;

    &lt;div id="yes_wrap_1" style="display:none"&gt;test1&lt;/div&gt;
    &lt;div id="no_wrap_1" style="display:none"&gt;test2&lt;/div&gt;

    &lt;div&gt;&lt;label&gt;&lt;input type="radio" id=radio2_1" name="radio_2" value="1"&gt;Yes&lt;/label&gt;
    &lt;label&gt;&lt;input type="radio" id=radio2_2" name="radio_2" value="2"&gt;Yes&lt;/label&gt;
    &lt;/div&gt;  

    &lt;div id="yes_wrap_2" style="display:none"&gt;test1&lt;/div&gt;
    &lt;div id="no_wrap_2" style="display:none"&gt;test2&lt;/div&gt;

    --------------- 


      ----------
    &lt;input type="submit" value="Submit"&gt;
&lt;/form&gt;
</code></pre>

<p>And here I am hard coding the first radio button clicked and trying to hide and show the first group of DIVs.
But I have the same structure dynamically generated 10 Radio button groups and 10 DIVs groups. I would like to use the same function to handle other Radio button groups. Could you please let me know how to achieve this? Thank you. </p>

<pre><code>$(document).ready(function(){ 
    $("input[name$='radio_1']").click(function() {
       if ($(this).val() === '1') 
        {       
             $("#yes_wrap_1").show();
             $("#no_wrap_1").hide();
         } 
        else if ($(this).val() === '2') 
        {       
             $("#yes_wrap_1").hide();
             $("#no_wrap_1").show();
        }  
    }); 
});
</code></pre>
