JQuery tabs function not working on selected tab - html

Question

I'm trying to fill a table based on the selected tab, I'm using JQuery-UI tabs library with ajax, the problem is that only the last function
$('#tabs, #tab-4').tabs()
is working (Actually all functions are executed but I can see only the last one), therefore it only brings the information from the last tab. I'm not sure if i'm doing the things right.
<ul id="tabs">
<li>Abiertos</li>
<li>Solucionados</li>
<li>Cerrados</li>
<li>Cancelados</li>
</ul>
<div class="containerTab" id="tab-1">
<table class="table table-striped" id="records_table">
<thead>
<tr>
<th class="text-center">Id</th>
<th class="text-center">Cliente</th>
<th class="text-center">Producto</th>
<th class="text-center">Descripción</th>
<th class="text-center">Fecha</th>
<th class="text-center">Incidente</th>
<th class="text-center">Operación</th>
</tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</table>
</div>
<div class="containerTab" id="tab-4">
<table class="table table-striped" id="records_table4">
<thead>
<tr>
<th class="text-center">Id</th>
<th class="text-center">Cliente</th>
<th class="text-center">Producto</th>
<th class="text-center">Descripción</th>
<th class="text-center">Fecha</th>
<th class="text-center">Incidente</th>
<th class="text-center">Cancelado por</th>
</tr>
</thead>
<tbody>
<tr></tr>
</tbody>
</table>
</div>
This is my script section (I removed tab-2 and tab-3 for the sake of not making it longer)
$('#tabs, #tab-1').tabs({
activate: function (event, ui) {
$("#records_table tbody tr").remove();
$.ajax({
type: "POST",
url: "/Servicios/GetIncidentes",
contentType: "application/json; charset=utf-8",
data: "{'incidente':'Abiertos'}",
dataType: "json",
success: function (response) {
$(function () {
$.each(response, function (i, item) {
var $tr = $('<tr>').append(
$('<td>').text(item.Id).addClass('text-center'),
$('<td>').text(item.Cliente).addClass('text-center'),
$('<td>').text(item.Producto).addClass('text-center'),
$('<td>').text(item.Descripcion).addClass('text-center'),
$('<td>').text(item.Fecha).addClass('text-center'),
$('<td>').text(item.Incidente).addClass('text-center'),
$('<td>').text('').addClass('text-center').prepend($('<i />', { 'class': 'fa fa-eye' }))
).appendTo('#records_table');
});
});
},
error: function (ts) { alert(ts.responseText) }
})
}
});
$('#tabs, #tab-4').tabs({
activate: function (event, ui) {
$("#records_table4 tbody tr").remove();
$.ajax({
type: "POST",
url: "/Servicios/GetIncidentes",
contentType: "application/json; charset=utf-8",
data: "{'incidente':'Cancelados'}",
dataType: "json",
success: function (response) {
$(function () {
$.each(response, function (i, item) {
var $tr = $('<tr>').append(
$('<td>').text(item.Id).addClass('text-center'),
$('<td>').text(item.Cliente).addClass('text-center'),
$('<td>').text(item.Producto).addClass('text-center'),
$('<td>').text(item.Descripcion).addClass('text-center'),
$('<td>').text(item.Fecha).addClass('text-center'),
$('<td>').text(item.Incidente).addClass('text-center'),
$('<td>').text('').addClass('text-center').prepend($('<i />', { 'class': 'fa fa-eye' }))
).appendTo('#records_table4 tbody');
});
});
},
error: function (ts) { alert(ts.responseText) }
})
}
});
The GetIncidentes method recieves a string (string incidente) and returns a parsed Json list.