Filtre multiple n'affiche que les valeurs d'un seul choix

function FilterFunction(value, data){
  console.log("value",value,"data",data);
  var filteredData = [];
  for(var i = 0; i < data.length; i++){
    value = value.toLowerCase();
    var facf_regcod_nospace = data[i].acf_regcod_nospace.toLowerCase();
    console.log("facf_regcod_nospace",facf_regcod_nospace,"value",value);
    if(facf_regcod_nospace.includes(value)){
      console.log("On rentre dans le if, on ajoute  :",data[i]);
      filteredData.push(data[i]);
    }else{
      console.log(" ELSE .. on n'ajoute pas la valeur :",data[i]);
    }
  }
  return filteredData; 
 }

<!-- /.col -->
<div class="col-md-6">
<div class="form-group">
<label>Multiple</label> <select id="txtSearch" name="keyword[NL][]" class="select2" multiple="multiple"
  data-placeholder="Select one or different values for AC" style="width: 100%;">
<option th:each="detail : ${faultDetails}" th:value="${detail.acf_regcod_nospace}" th:text="${detail.acf_regcod_nospace}"></option>
</select>
          
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="card">
<div class="card-header">
<h3 class="card-title">Open Fault Details</h3>
</div>
<div class="card-body" style="width: 98%; min-height: 400px; height: 400px; overflow: auto;">

<table id="detailsTable" class="table table-bordered table-hover">
<thead>
<tr class="table-info">
<th>FLEET</th>
<th>AC</th>
<th>SEVERITY</th>
<th>FAULT DEFERRALCLASS</th>
<th>FAULT DEFERRALREF</th>
<th>STATUS</th>
<th>DUE EXT</th>
<th>DUE</th>
<th>FOUND DATE</th>
<th>PARENT EVENT ID</th>
<th>PARENT EVENT</th>
</tr>
</thead>
<tbody>
<tr th:each="detail : ${faultDetails}">
<td th:text="${detail.acf_fleet}">ACF FLEET</td>
<td th:text="${detail.acf_regcod_nospace}">ACF_REGCOD_NOSPACE</td>
<td th:text="${detail.fault_severity}">FAULT SEVERITY</td>
<td th:text="${detail.fault_deferralclass}">FAULT DEFERRALCLASS</td>
<td th:text="${detail.fault_deferralref}">FAULT DEFERRALREF</td>
<td th:text="${detail.workscope_status}">STATUS</td>
<td th:text="${detail.due_date_extend}">DUE_EXT</td>
<td th:text="${detail.due_date}">DUE</td>
<td th:text="${detail.fault_foundondate}">FOUND DATE</td>
<td th:text="${detail.parent_event_id}">PARENT EVENT ID</td>
<td th:text="${detail.parent_event}">PARENT EVENT</td>
</tr>
</tbody>
</table>
</div>
</div>

$('#txtSearch').select2({
  allowClear: true,
  tags:true,
  placeholder:'Select values ..',
  closeOnSelect:false
   });

	$('#txtSearch').select2('data');

<script th:inline="javascript">

	/*<![CDATA[*/
		var faultDetails = /*[[${faultDetails}]]*/"";
	/*]]>*/
	
	function FilterFunction(value, data){
	  console.log("value",value,"data",data);
		var filteredData = [];
		
		for(var j =0; j<value.length; j++){
		var v = value[j].text;
		var vi= v.toLowerCase();
		console.log(v);	
		for(var i = 0; i < data.length; i++){
			var facf_regcod_nospace = data[i].acf_regcod_nospace.toLowerCase();
			console.log("facf_regcod_nospace",facf_regcod_nospace,"value",value);
			if(facf_regcod_nospace.includes(vi)){
			console.log("On rentre dans le if, on ajoute  :",data[i]);
			filteredData.push(data[i]);
			}else{
     		 console.log(" ELSE .. on n'ajoute pas la valeur :",data[i]);
   			 }}}
		return filteredData;	
	}
	function rebuildTable(data){
		var table = document.getElementById('detailsTable')
		table.innerHTML=''
		
		for(var i = 0; i <data.length; i++){
			var row = `<tr>
				<td>${data[i].acf_fleet}</td>
				<td>${data[i].acf_regcod_nospace}</td>
		        <td>${data[i].fault_severity}</td>
			</tr>`
			table.innerHTML +=	row
		}}
	$(document).ready(function()
	{
	$('#txtSearch').select2({
		allowClear: true,
		tags:true,
		placeholder:'Select values ..',
		closeOnSelect:false
			});
	$('#txtSearch').on('change', function(){	
	
		var value  =$('#txtSearch').select2('data');
		var data = FilterFunction(value, faultDetails);
		rebuildTable(data)

		})
	});
</script>