Currently, I have a piece of code that allows me to select two players and display some statistics about them. The data is presented using a regular table (image1).
The issue I am facing is that when I select a new player, instead of updating the information for the newly selected player, the table simply adds another line (image2). Although the data displayed is accurate, I do not want it to create an additional row in the table. I would prefer to replace the previous player's data with the current player's data, but I am unsure how to achieve this.
I admit that I am not very proficient in jQuery, here is my code:
<script>
$(document).ready(function() {
//First Player Selection
jQuery("#p1").on('focusout', function(e) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
var p1 = $('#p1').val();
var p2 = $('#p2').val();
jQuery.ajax({
url: "{{ route('ajax') }}/?p1=" + p1 + "&p2=" + p2,
method: 'Get',
success: function(result) {
$("#player1").append("<h2 class='p1'>" + result[0].player + "</h2>");
$("#p1kills").append("<h2 class='alignRight'>" + result[0].kp + "</h2>");
$("#p1kda").append("<h2 class='alignRight'>" + result[0].kda + "</h2>");
// Additional stat updates go here...
}
});
});
//Second Player Selection
jQuery("#p2").on('focusout', function(e) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
var p2 = $('#p2').val();
var p1 = $('#p1').val();
jQuery.ajax({
url: "{{ route('ajax') }}/?p1=" + p1 + "&p2=" + p2,
method: 'Get',
success: function(result) {
$("#player2").append("<h2 class='p1' >" + result[1].player + "</h2>");
$("#p2kills").append("<h2 >" + result[1].kp + "</h2>");
$("#p2kda").append("<h2 >" + result[1].kda + "</h2>");
// Additional stat updates go here...
}
});
});
});
</script>