Jquery Onclick doesnt seem to work for me...

Question

My php page uses sequence of three radio buttons and two out of three calls jquery click event and toggles a div accordingly...

Here is my Jquery function....

$(function() {    
  $("#click_here").click(function(event) {
    event.preventDefault();
    $("#div1").slideToggle();
  });

  $("#div1 a").click(function(event) {
    event.preventDefault();
    $("#div1").slideUp();
  });
});

$(function() {
  $("#click").click(function(event) {
    event.preventDefault();
    $("#div2").slideToggle();
  });

  $("#div2 a").click(function(event) {
    event.preventDefault();
    $("#div2").slideUp();
  });
});

and my radio buttons are

        <input type="radio" name="Modeofpayment" value="1">Cash
        <div>
          <div id="id"  style="width:411x; height:20px;">
              <input type="radio" name="Modeofpayment" id="click_here" value="2">DD
              </div>
    <div style="display: none;" id="div1">
        <div style="float:right;">
            <a href="#" class="close">[x]</a>
        </div>
    <input type="hidden" name="chkVal" id="chkVal" size="20">
        <table border="0" width="200" align="center">
           <tr>
            <td style="width:5px">&nbsp;</td>
            <td class="table_label" width='100px'>College Bank Name</td>
            <td style="width:10px">&nbsp;</td>
            <td>
            <input type='text' name='txtCollegeBankName' id='txtCollegeBankName' 

            Class='text_box_height_14_width_150' >
            </td>
            <td></td>
            <td style="width:5px">&nbsp;</td>
            </tr>
            <tr>
            <td style="width:5px">&nbsp;</td>
            <td class="table_label" width='100px'>DD NO</td>
            <td style="width:10px">&nbsp;</td>
            <td>
            <input type='text' name='txtDDNO' id='txtDDNO' 

            Class='text_box_height_14_width_150' >
            </td>
            <td></td>
            <td style="width:5px">&nbsp;</td>
            </tr>
            <tr>
            <td style="width:5px">&nbsp;</td>
            <td class="table_label" width='100px'>DD Amount</td>
            <td style="width:10px">&nbsp;</td>
            <td>
            <input type='text' name='txtDDAMT' id='txtDDAMT' 

            Class='text_box_height_14_width_150' >
            </td>
            <td></td>
            <td style="width:5px">&nbsp;</td>
            </tr>
            <tr>
            <td style="width:5px">&nbsp;</td>
            <td class="table_label" width='100px'>DD Bank Name</td>
            <td style="width:10px">&nbsp;</td>
            <td>
            <input type='text' name='txtBankName' id='txtBankName' 

            Class='text_box_height_14_width_150' >
            </td>
            <td></td>
            <td style="width:5px">&nbsp;</td>
            </tr>
            <tr>
            <td style="width:5px">&nbsp;</td>
            <td class="table_label" width='100px'>Remarks</td>
            <td style="width:10px">&nbsp;</td>
            <td>
            <input type='text' name='txtRemarks' id='txtRemarks' 

            Class='text_box_height_14_width_150' >
            </td>
            <td></td>
            <td style="width:5px">&nbsp;</td>
            </tr>   


        </table>

    </div>
    <div>
          <div id="id"  style="width:411x; height:20px;">
               <input type="radio" name="Modeofpayment" id="click" value="3">Cheque
          </div>
    <div style="display: none;" id="div2">
        <div style="float:right;">
            <a href="#" class="close">[x]</a>
        </div>
    <input type="hidden" name="chkVal" id="chkVal" size="20">
        <table border="0" width="200" align="center">
           <tr>
            <td style="width:5px">&nbsp;</td>
            <td class="table_label" width='100px'>College Bank Name</td>
            <td style="width:10px">&nbsp;</td>
            <td>
            <input type='text' name='txtCollegeBankName' id='txtCollegeBankName' 

            Class='text_box_height_14_width_150' >
            </td>
            <td></td>
            <td style="width:5px">&nbsp;</td>
            </tr>
            <tr>
            <td style="width:5px">&nbsp;</td>
            <td class="table_label" width='100px'>CHQ NO</td>
            <td style="width:10px">&nbsp;</td>
            <td>
            <input type='text' name='txtDDNO' id='txtDDNO' 

            Class='text_box_height_14_width_150' >
            </td>
            <td></td>
            <td style="width:5px">&nbsp;</td>
            </tr>
            <tr>
            <td style="width:5px">&nbsp;</td>
            <td class="table_label" width='100px'>CHQ Amount</td>
            <td style="width:10px">&nbsp;</td>
            <td>
            <input type='text' name='txtDDAMT' id='txtDDAMT' 

            Class='text_box_height_14_width_150' >
            </td>
            <td></td>
            <td style="width:5px">&nbsp;</td>
            </tr>
            <tr>
            <td style="width:5px">&nbsp;</td>
            <td class="table_label" width='100px'>CHQ Bank Name</td>
            <td style="width:10px">&nbsp;</td>
            <td>
            <input type='text' name='txtBankName' id='txtBankName' 

            Class='text_box_height_14_width_150' >
            </td>
            <td></td>
            <td style="width:5px">&nbsp;</td>
            </tr>
            <tr>
            <td style="width:5px">&nbsp;</td>
            <td class="table_label" width='100px'>Remarks</td>
            <td style="width:10px">&nbsp;</td>
            <td>
            <input type='text' name='txtRemarks' id='txtRemarks' 

            Class='text_box_height_14_width_150' >
            </td>
            <td></td>
            <td style="width:5px">&nbsp;</td>
            </tr>   


        </table>

    </div>

By default i can select one but i cant select another one ... My previous radio button remains selected and my new radio button click toggles the div but its not selected....

Answer 1

Right from the very beginning of your markup, you don't close your <input> tag.

In fact, you never close any of your input tags.

Answer 2

Your radio buttons are not selected because you have event.preventDefault(); on your click functions - this cancels the click and doesn't select them.
Simply remove these lines.