After 1st json call working but 2nd json call not working till page get refresh

Question

Hi I am working in one application and in that I am using json call to decline the request. Now when I am going to decline request one by one I find one issue that on single page when I am decline one request it get declined but when I am going to decline 2nd request it is not declining that request.

In case if I need to decline 2nd request in that case 1st I need to refresh that page and then after I am able to decline that 2nd request.

Below is the screen shot

My view page code.

In script tag

function declinestudentrequest() {
    var StudentRequestId = document.getElementById('hdstatusstudentrequestid').value;
    var StatusId = document.getElementById('hdstatusdecline').value;
    $.ajax({
        url: '/Account/declinestudentrequest',
        type: 'GET', // You can use GET
        data: { 'StudentRequestId': StudentRequestId },
        dataType: "json",
        context: this,
        cache: false,
        success: function (data) {
            if (data == "Success") {
                $("#GetStatusMessage_" + StudentRequestId).css({ "display": "block" });
                $('#div_p_' + StudentRequestId).text("You have decline for student Response");
                $("#GetReqdec_" + StudentRequestId).hide();
            }
            else { alert('Some Error'); }
        },
        error: function (request) {
            console.log(request);              
        }
    });
}

Design

  @if (Convert.ToInt16(item.StatusId) == 1)
{
    <div id="GetStatusMessage_@item.StudentRequestId" style="display:none;">
        <p id="div_p_@item.StudentRequestId">Waiting for student Response.</p>
    </div>
    <div id="GetReqdec_@item.StudentRequestId">
        @using (Html.BeginForm("TutorDashboard", "AccountController"))
        {             
            @Html.TextAreaFor(model => item.Description, new { @class = "form-control", @placeholder = "Please describe how you can help.", @id = "txtdescription" })             
            <br />
            <span>Hourly rate :</span>
            @Html.EditorFor(model => item.Ratedummy, new
        {
            htmlAttributes = new { @class = "form-control", placeholder = "Price", maxlength = 10, id = "txtrate" }
        })              
            <p class="text-right">
                <input type="hidden" id="hdstatusrequest" name="hdstatusrequest" value='2' />
                <input type="hidden" id="hdstatusdecline" name="hdstatusdecline" value='3' />
                <input type="hidden" id="hdstatusstudentrequestid" name="hdstatusstudentrequestid" value='@item.StudentRequestId' />              
                <input type="button" onclick="return declinestudentrequest();" class="btn btn-default btn-hire decline_btn" value="Decline" />
            </p>
        }
    </div>
}

My Account controller Side code

    public ActionResult declinestudentrequest(string StudentRequestId)
    {
        string result = "";
        try
        {
            if (User.Identity.IsAuthenticated)
            {                    
                TutorStudentRequest tsr = new TutorStudentRequest();
                tsr.StudentRequestId = Convert.ToInt32(StudentRequestId);
                tsr.Rate = 0;                
                tsr.StatusId = 3;                 
                db.TutorStudentRequests.Add(tsr);
                db.SaveChanges();
                result = "Success";
            }
            else
            {
                return RedirectToAction("Index", "Home");
            }
        }
        catch (Exception ex)
        {
            result = "Error";
            throw ex;
        }
        return Json(result, JsonRequestBehavior.AllowGet);
    }

Why my second request for decline is not working ?

Answer 1

The issue is resolved as there was an issue of id getting conflicting so I have tried some thing like.

On view page I made changes as

 <input type="hidden" id="hdstatusstudentrequestid_@item.StudentRequestId" name="hdstatusstudentrequestid" value='@item.StudentRequestId' />              
 <input type="button" onclick="return declinestudentrequest('@item.StudentRequestId');" class="btn btn-default btn-hire decline_btn" value="Decline" />

and in script

function declinestudentrequest(id) {
    var StudentRequestId = document.getElementById('hdstatusstudentrequestid_'+id).value;
    var StatusId = document.getElementById('hdstatusdecline').value;
    $.ajax({
        url: '/Account/declinestudentrequest',
        type: 'GET', // You can use GET
        data: { 'StudentRequestId': StudentRequestId },
        dataType: "json",
        context: this,
        cache: false,
        success: function (data) {
            if (data == "Success") {
                $("#GetStatusMessage_" + StudentRequestId).css({ "display": "block" });
                $('#div_p_' + StudentRequestId).text("You have decline for student Response");
                $("#GetReqdec_" + StudentRequestId).hide();
            }
            else { alert('Some Error'); }
        },
        error: function (request) {
            console.log(request);              
        }
    });
}

Here I am making uniqueness from while passing studentrequestid as unique