Bootstrap change button value

Question

I'm having trouble changing a button value in bootstrap. I can change it using jQuery, but i'm changing it from a modal dialog. I looked elsewhere on SO but I couldn't find anything that seemed to match my specific issue?

Steps:

Click button. Change button text on main html form. Upon clicking the button it changes the text, closes the modal, and then immediately the text changes back to what it was originally. It should just change the text and stay that way, obviously.

$("#validate-rv-button").click(function () {
    $("#review-history-validate").val("Review History");
});

HTML

 <input id="review-history-validate" type="button" class="rvButtons btn btn-outline-warning btn-sm" data-toggle="modal" data-target="#review-history" value="Validate" />

Any help would be much appreciated.

Answer 1

Another way to do it with <button></button>

 <button id="review-history-validate" type="button" class="rvButtons btn btn-outline-warning btn-sm" data-toggle="modal" data-target="#review-history" />Validate</button>

in jquery:

$("#validate-rv-button").click(function () {
    $("#review-history-validate").text("Review History");
});

Answer 2

I believe you got the naming wrong.

This works:

$("#review-history-validate").click(function () {
    document.getElementById("review-history-validate").value = "My value";
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="review-history-validate" type="button" class="rvButtons btn btn-outline-warning btn-sm" data-toggle="modal" data-target="#review-history" value="elo" />

Or jQuery only as your question:

$("#review-history-validate").click(function () {
    $("#review-history-validate").val("My value");
});