Match player's entries with difference weight - ajax

Question

I am making a matchmaking system. Currently, what my system does is that it matches the player's entries with the same weight. My target is to match a player's entries with a different weight based on what i will type on my textbox.
For example:
User typed "10" on the textbox. Player 1 has 1920 weight. Player 2 has 1930 weight. They will be matched. But If user typed "15" it means that they will not be matched because it exceeds.
HTML:
<div class="card-body">
<div class="tab-content" id="custom-tabs-two-tabContent">
<div class="tab-pane fade show active" id="custom-tabs-two-profile" role="tabpanel" aria-labelledby="custom-tabs-two-profile-tab">
<div class="card-body table-responsive py-3 px-3">
<table id="entry_list" class="table table-bordered" cellspacing="0" style="width: 100%;">
<input type="text" id="eventID" value="<?php echo $eventID?>">
<input type="text" name="Difference" id="Difference" placeholder="Difference"> // this textbox is where i need to put whether the difference is 10 or 15.
<thead>
<tr>
<th>Entry ID</th>
<!-- <th>Event ID</th> -->
<th>Player</th>
<th>weight</th>
<!-- <th>Status</th> -->
<!-- <th>lightBand</th> -->
<!-- <th>wingBand</th> -->
<!-- <th>noOfFight</th> -->
<!-- <th>score</th> -->
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<button class="btn btn-success float-right" data-toggle="modal" data-target="#createModal" data-dismiss="modal"><i class="glyphicon glyphicon-plus"></i> Match</button>
<div class="modal fade" id="createModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title">Matching</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="insertMatching" enctype="multipart/form-data" >
<input type="text" name="status" id="status">
<h3>Are you sure that you want to match?</h3>
<table id="entry_list1" class="table table-bordered table-hover" cellspacing="0" hidden>
<thead>
<tr>
<th>Entry ID</th>
<!-- <th>Event ID</th> -->
<th>Player </th>
<th>weight</th>
<!-- <th>Status</th> -->
<!-- <th>lightBand</th> -->
<!-- <th>wingBand</th> -->
<!-- <th>noOfFight</th> -->
<!-- <th>score</th> -->
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="result"> </div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary pull-left" data-dismiss="modal">Close</button>
<button type="button" id="submitMatching" class="btn btn-primary">Match</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Script(Ajax):
<script>
let ajaxResult = []; // the pushed data will be saved here
let save_method;
let table;
let base_url = "<?php echo base_url();?>";
let result = [];
var html = "";
// this function combines 2 players with the same weight, if there are entries who has no same weight, hence it'll be joker. (Joker means the player has no match)
const combine = (source) => {
return source.reduce((acc, curr) => {
if (acc[curr.weight]) {
const levelArr = acc[curr.weight];
const last = levelArr[levelArr.length - 1];
if (last.length === 2) {
levelArr.push([curr])
} else {
last.push(curr)
}
} else {
acc[curr.weight] = [
[curr]
];
}
return acc;
}, {})
};
// this function removes duplicates. Players' entries cannot be matched to themselves. P1 vs P1 is cannot be.
function removeDuplicates(result) {
return Object.values(result.reduce((acc, curr) => {
acc[curr.player] = acc[curr.player] || curr;
return acc;
}, {}))
}
const uniquePlayers = removeDuplicates(result);
$(document).ready(function() {
//datatables
table = $("#entry_list1").DataTable({
processing: false,
serverSide: true,
order: [],
searching: false,
paging: false,
info: false,
ajax: {
url: "<?php echo site_url('entry/ajax_list')?>",
type: "POST",
async: true,
dataType: "json",
success: function(data) {
result = combine(removeDuplicates(data.data2));
console.log(result);
var keys = Object.keys(result)
for (var i = 0; i < keys.length; i++) {
result[keys[i]].forEach(function(val) {
var length_ = val.length;
val.forEach(function(value, index) {
var entryIDs = index == 0 ? "entryIDM[]" : "entryIDW[]"
var players = index == 0 ? "playerM[]" : "playerW[]"
var weights = index == 0 ? "weightM[]" : "weightW[]"
html += `<input type="text" name="${entryIDs}" value="${value.entryID}">
<input type="text" name="${players}" value="${value.player}">
<input type="text" name="${weights}" value="${value.weight}">
`
if (length_ == 1) {
html += `<input type="text" name="entryIDW[]" value="joker"> <input type="text" name="playerW[]" value="joker"><input type="text" name="weightW[]" value="joker">`
}
})
})
}
document.getElementById("result").innerHTML = html //add html to div
},
},
"columnDefs": [{
"targets": [0], //first column
"orderable": false, //set not orderable
},
{
"targets": [-1], //last column
"orderable": false, //set not orderable
},
],
});
});
</script>