I have a problem trying to make an entire div or individual HTML input controls on the div read only.

I have a div that looks like to included HTML code and I late call a JavaScript function which runs the included jQuery statements, but it does not work. Does anyone have ideas.

2. <!-- from  "benefits_application_page.htm" -->
3. <!-- start: divReadOnlyFields  -->
4. <div id="divReadOnlyFields ">
    Last Name:  <input name="last_name" type="text" id = "last_name" required/><label id="Label4">   Other Names:</label>
    <input name="oth_names" type="text" style="width: 177px" id = "oth_names" required/>   Email
    Address:   <input name="email" type="text" style="width: 166px" id ="email"/><label id="Label5">   Date
    of Birth:</label><input name="dob" type="date" id = "dob"/><label id="Label6"> </label><br/>  Sex:
    <select id = "sexType">
     <option value ="M">Male</option>
     <option value ="F">Female</option>
    </select> 
   
   
   
   
   
   
   
   
5.  <br/>
   </div> 
    
   </div> <!-- end: divReadOnlyFields  -->
   
   
   
   
8. <!-- jQuery code in same file -->
9.  $(document).ready(function(){
     $("#divReadOnlyFields > input").attr("readonly", true);
   
10. $("#divReadOnlyFields > input").attr("disabled", true);
11. $("#divReadOnlyFields > select").attr("readonly", true);
12. });