Two buttons in asp.net C# works weird - asp.net

Question

I am facing a very weird issue here. I am calling an action (which is a view) and there I have got two buttons. There are separate handles for these buttons in javascript which is placed in the same .cshtml file. The code as mentioned below:
#model fbpm.Models.UserDetail
#{
ViewBag.Title = "My View"; }
<style type="text/css">
#top
{
width:360px;
float: left;
height:100px;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
#right
{
width:360px;
float: left;
height:100px;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
} </style>
<div id="top" class="display-field">
Name : #Html.DisplayFor(model => model.UserName)
<br />
<br />
<input id="userid" type="hidden" value = #Html.DisplayFor(model => model.UserID)></input>
Address : #Html.DisplayFor(model => model.FullAddress) <br />
#Html.DisplayFor(model => model.State) <br />
#Html.DisplayFor(model => model.Country)
<br />
<br />
</div>
<div id="top" class="display-field">
PAN # : #Html.DisplayFor(model => model.PANNo)
<br /><br />
Booked Date : #Html.DisplayFor(model => model.BookedDate)
<br />
<br />
<br />
<br />
</div>
<div id="right" class="display-field">
Booked Amount : INR #Html.DisplayFor(model => model.BookedAmount)
<br /><br />
Remaining Amount : INR
<label id="ramt"/>
<br />
<br />
<br />
<br />
</div>
<div id="display" style="clear:both;">
<button type="button"style="width:150px" id="paysched" name="paysched" onclick="handleflat();">Payment Schedule</button>
<button type="button" style="width:150px" id="flat" name="flat" onclick="handleps();"> Flat </button>
</div>
<br />
<div id="container" style="clear:both;"> Click on the above button to display Flat/Payment Schedule </div> <script type="text/javascript" language="javascript">
$.get('#Url.Action("GetRamt", "Customer")?id=' + document.getElementById("userid").value,
function (amount) {
document.getElementById("ramt").innerHTML = amount;
});
function handleflat() {
$.get('#Url.Action("GetFlat", "Customer")?id=' + document.getElementById("userid").value,
function (viewResult) {
$("#container").html(viewResult);
});
}
function handleps() {
$.get('#Url.Action("paysched", "Customer")?id=' + document.getElementById("userid").value,
function (viewResult) {
$("#container").html(viewResult);
});
} </script>
However, When I click on the second button (Payment Schedule), its calling the Flat button action. And when i keep clicking the second button, sometimes it works! And when it works, I click on some other area in the window, the first button's function is called.
Please can someone help?
*EDIT: The first button is always highlighted and I guess, thats the problem why the first button's function is always called. I dont want this behavior *
EDIT2: Meanwhile, i was just playing around with the code and I changed the Button to Radio buttons! Initially, both the radio buttons were not selected and when I click on the second button, the second button is getting selected. Now, is the interesting part => When I click on any part of the result view, the first radio button is getting selected!!! And now, both the radio buttons are ON!!! :(
*EDIT3: And I named both the radio buttons with the same name. Now, clicking on any part of the result div is making the first radio button selected! *
Placing the mouse over the DIV - CONTAINER, highlights the First button and thats why that button is getting clicked.
Regards,
Hari

Answer 1

Apart from the fact that your html could use some cleaning up for example:
<input id="userid" type="hidden" value = #Html.DisplayFor(model => model.UserID)></input>
Becomes:
#Html.HiddenFor(model => model.UserID)
Also ... nbsp; among other things.
And the javascript could be something like this:
$(function () {
// get the user id
var userId = $('#UserID').val();
// get 'Remaining Amount' -> this should be included in your view model frankly speaking
// getting it like this is not "ideal"
$.get('#Url.Action("GetRamt", "Customer")?id = ' + userId, function (responseData) {
$('#ramt').text(responseData);
});
// bind the button events
$('#flat').click(function() {
var flatUrl = '#Url.Action("GetFlat", "Customer")?id = ' + userId;
getCustomerData(flatUrl);
});
$('#paysched').click(function () {
var paySchedUrl = '#Url.Action("paysched", "Customer")?id = ' + userId;
getCustomerData(paySchedUrl);
});
// handle the response from the server for the customer data
var getCustomerData = function(url) {
$.get(url, function(responseData) {
$('#container').html(responseData);
});
};
});
I hope this helps.