Datatables are not updated when opening modals via datatables column hyperlinks - ajax

Question

I have a problem here.
Here there are 2 Datatables, 1 to display the initial data, and 1 to display one of the data from the first table. I am using Name column as Hyperlink using href. When the name is clicked, modals appear containing details. When I press another name, the datatables in the modals are not updated, only the data with the first name appears.
Here's the code
<form id="filter-form">
<div class="row">
<div class="col-md-3 col-sm-6 mb-3">
<label for="">Tahun</label>
<select class="form-control" id="f_tahun" name="f_tahun">
<option value=''> Pilih Tahun </option>
<? foreach ($tahun as $row) : ?>
<option value='<? echo $row['f1']; ?>'><? echo $row['f1']; ?></option>
<? endforeach; ?>
</select>
</div>
<div class="col-md-3 col-sm-6 mb-3">
<label for="">Bulan</label>
<select class="form-control" id="f_bulan" name="f_bulan">
<option value=''> Pilih Bulan </option>
</select>
</div>
<div class="col-md-3 col-sm-6 mb-3">
<label for="">Departemen</label>
<select class="form-control" id="f_depart" name="f_depart">
<option value=''> Pilih Departemen </option>
<? foreach ($depart as $row) : ?>
<option value='<? echo $row['f2']; ?>'><? echo $row['f2']; ?></option>
<? endforeach; ?>
</select>
</div>
<div class="col-md-3 col-sm-6 mb-3">
<label for="">Kelas</label>
<select class="form-control" id="f_kelas" name="f_kelas">
<option value=''> Pilih Kelas </option>
</select>
</div>
<br>
</div>
<div style="margin-top:20px;">
<input type="submit" name="submit" value="Filter" class="btn btn-primary d-inline">
</div>
</form>
<div class="row">
<div class="col-md-12">
<br>
<div class="table-responsive">
<table class="table table-bordered" id="example" style="width:100%;">
<thead>
<tr>
<th>Nama</th>
<th>Hadir</th>
<th>Izin</th>
<th>Sakit</th>
<th>Cuti</th>
<th>Alpa</th>
<th>Total</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
Here's a Modals
<div class="modal fade" id="myModal" style="display:none">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<table id="modal_table" class="table table-striped">
<thead>
<tr>
<th>Tanggal</th>
<th>Hadir</th>
<th>Ijin</th>
<th>Sakit</th>
<th>Cuti</th>
<th>Alpa</th>
</tr>
</thead>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default " data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
Here's the Javascript
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
var dataTable;
var tahun = document.getElementById("f_tahun").value;
var bulan = document.getElementById("f_bulan").value;
dataTable = $('#example').DataTable({
"ajax": {
url : "<? echo base_url('absenSiswa/getAbsen'); ?>",
type: "POST",
data: {filter_data : function(){ return $('#filter-form').serialize();}}
},
"columnDefs": [{
"defaultContent": "-",
"targets": "_all"
}],
"aoColumns": [
{data : "nama",
render: function (data, type, row) {
return ''+data+'';
}},
{data : "hadir"},
{data : "ijin"},
{data : "sakit"},
{data : "cuti"},
{data : "alpa"},
{data : "total"}
],
"scrollCollapse": true,
"fixedColumns": {
"left": 1
},
"scrollX": true,
'processing': true,
'language': {
"loadingRecords": ' ',
"processing" : '<i class="fa fa-spinner fa-spin" style="font-size:24px;color:rgb(75, 183, 245);"></i>'
},
});
$('#filter-form').submit(function(e){
e.preventDefault();
dataTable.ajax.reload();
})
});
</script>
<script>
function launch(nis){
document.getElementById('myModal').style.display='';
alert(nis);
var dataTable1;
var tahun = document.getElementById("f_tahun").value;
var bulan = document.getElementById("f_bulan").value;
dataTable1 = $('#modal_table').DataTable({
"ajax": {
url : "<? echo base_url('absenSiswa/getDetail'); ?>",
type: "POST",
data: {filter_data : function(){ return $('#filter-form').serialize();},
nis : function(){return nis;}}
},
"columnDefs": [{
"defaultContent": "-",
"targets": "_all"
}],
"aoColumns": [
{data : "tanggal"},
{data : "hadir"},
{data : "ijin"},
{data : "sakit"},
{data : "cuti"},
{data : "alpa"}
],
"scrollCollapse": true,
"fixedColumns": {
"left": 1
},
"scrollX": true,
'processing': true,
'language': {
"loadingRecords": ' ',
"processing" : '<i class="fa fa-spinner fa-spin" style="font-size:24px;color:rgb(75, 183, 245);"></i>'
},
});
}
</script>
Thank you very much