JQuery not clearing form data on ASP.NET MVC view with embedded partial views

In our ASP.NET MVC 4 app we have an Index.cshtml view with a single form tag and multiple partial views embedded inside that tag. Index.cshtml has horizontal tabs on top and each partial view is associated with one of these tabs:

@{
    ViewBag.Title = "Main Page";
}
@section Scripts{
<script type="text/javascript">
   $(document).ready(function () {
     $('#btnClearAll').click(function () {
        $(':input').not(':button, :submit, :reset, :hidden').val('');
     });
});
</script>
}
<form action="#">
<div id="tabs">
  <ul>
     <li><a href="#Tab1" id="Tab1_menu_link">Tab 1/a></li>
     <li><a href="#Tab2" id="Tab2_menu_link">A</a></li>
     <li>.......</li> //other tabs ...
  </ul>
  <div id="Tab1">
     @{Html.RenderPartial("View1");}
  </div>
  <div id="Tab2">
     @{Html.RenderPartial("View2");}
  </div>
  ......//other embedded views etc.
</form>

View1 has a 'Clear All' button. We wrote the click event (as shown above) inside the Index.chtml file's tag so that when user clicks on the above button, it would clear the data from all the input controls from all the partial views inside this single form. But the button clears the data only from the controls inside partial view1.

The input controls of all the partial views are of type text (text boxes) some of their values are readonly and are coming from text boxes from other partial views. For instance, textbox1 of view1 is readOnly and have its value set to the textbox2 of view2. The values of all the non-readonly textboxes are are entered by the user.

How can we make the above code clear the data from input controls inside all the partial views?

Thanks..Nam