cannot change html content multiple times with jquery - php

Question

The idea of this code is when click on a button it should change the button from for ex drop to Enroll.
Here is code containing jQuery:
$(document).ready(function() {
$(document).on('click','.dropJQ',function () {
var classIdValue = this.value;
var toEnrollBtn = "#" + classIdValue +"ToEnrollButton";
var toEmpty = "#" + classIdValue +"ToEmpty";
$.get("rmov.php", {classID : classIdValue},
function(response){
var opeartion = "success";
if(response == opeartion){
alert("The drop operation was failed");
}else{
alert("The drop operation was successful!");
}
$(toEnrollBtn).html("<button class = 'enrollJQ' value = "+classIdValue+" >Enroll</button>");
$(toEmpty).html("");
});
});
});
</script>
<script>
$(document).ready(function() {
$(document).on('click','.enrollJQ',function () {
var classIdValue = this.value;
var toEnrolledString = "#" +classIdValue + "ToEnrolledString";
var toDropBtn = "#" + classIdValue + "ToDropBtn";
$.get("rsv.php", {classID : classIdValue},
function(response){
var opeartion = "success";
if(response == opeartion){
alert("The enroll operation was failed");
}else{
alert("The enroll operation was successful!");
}
$(toEnrolledString).html("Enrolled");
$(toDropBtn).html("<button class ='dropJQ' value = '"+classIdValue+"' >Drop</button>");
});
});
});
Here's a subset of code where trigger happens:
while($row= mysqli_fetch_assoc($result)) {
//echo '<tr><td>'.$row['name'].''.' </td>';
echo '<tr id="trenrolld">';
echo '<td>'.$row['name'].''.' </td>';
echo '<td id="'.$row['id'].'ToEnrollButton">Enrolled</td>';//Drop
echo '<td id="'.$row['id'].'ToEmpty"><button class = "dropJQ" value = "'.$row['id'].'" >Drop</button></td>';
echo '</tr>';
}
Once I click on a button, the button change from for ex. enroll -> drop, but when I click again the button stays 'Drop'

Answer 1

You can check on click the text of the button and then change it.
Example:
<button>Enrolled</button>
$("button").click(function(){
$(this).text($(this).text() == 'Enrolled' ? 'Drop' : 'Enrolled');
});