jquery - Naming radio buttons to hide/show -

i have several sets of radio buttons on form - need independent (in pairs). when set called "time" selected need 'yes' show <p> , no leave hidden. have set <p> hidden using css , below code works on 1 set of radio buttons when start adding others in don't want selecting 'yes' on first set show <p> across (to differentiate <p> calling them <p1>, <p2> etc...

how name radio buttons in below script affect

'time' radio buttons selected.

<script> $(document).ready(function(){     $(":radio:eq(0)").click(function(){         $("p").show();     });      $(":radio:eq(1)").click(function(){         $("p").hide();     }); }); </script> 

html is:

 can call ph before 9am:  <input type="radio" name="9am" value="yes">yes <input type="radio" name="9am" value="no">no<br> <p class="hidden">yes can call ph before 9am</p> 

update **

what don't understand how jquery knows referencing specific set of radio buttons (and when add set how know referencing them). not need include 'name' of radio buttons in jquery each set of radio buttons differentiate them each other?

further update **

<script> $(document).ready(function(){     $(":radio:eq(0)").click(function(){         $("p").show();     });     $(":radio:eq(1)").click(function(){         $("p").hide();     }); }); </script> 

html

 can call ph before 9am:  <input type="radio" name="9am" value="yes">yes <input type="radio" name="9am" value="no">no<br> <p class="hidden">yes can call ph before 9am</p><br>  vulnerability: <input type="radio" name="vulnerabille" value="yes">yes <input type="radio" name="vulnerable" value="no">no<br> <p class="vulnerability">what vulnerability:</h1><br> 

css

<style> p.hidden {display:none;} h1.hidden {display:none;} </style> 

i have updated code have better idea of trying do.

at moment when click yes on either set of radio buttons both have same affect on both <p> sections. want radio button affect <p> directly beneath it.

one approach, work html as-written, follows:

$('input[type="radio"]').change(function () {     $(this).nextall('p.hidden').first().toggle(this.value == 'yes'); }).change(); 

js fiddle demo.

a improved html, in allows user click text labelling elements, since text (and input both wrapped in label element) follows:

<div class="question">     <label>     <input type="radio" name="9am" value="yes" />yes     </label>     <label>     <input type="radio" name="9am" value="no" checked />no     </label>     <br />     <p class="hidden">yes can call ph before 9am</p> </div> <div class="question">     <label>     <input type="radio" name="10am" value="yes" />yes     </label>     <label>     <input type="radio" name="10am" value="no" checked />no     </label>     <br />     <p class="hidden">yes can call ph before 10am</p> </div> 

which works jquery:

$('input[type="radio"]').change(function () {     $(this).closest('div.question').find('p.hidden').toggle(this.value == 'yes'); }).change(); 

js fiddle demo.

references:

• attribute-equals ([attribute="value"]) selector.
• change().
• closest().
• find().
• first().
• nextall().
• toggle().