Is it possible to filter already fetched data with jQuery
Yes you can.
This is often done on the server, but if your data set is small enough it can work. If you set the filterable data points as data elements of your items you can just compare the selected value from the filter. jQuery's each function is one way to loop through the elements and you can then use the data function to access the appropriate data attribute.
$('#room-filter').on('change', function() {
const numRooms = $(this).val();
$('.card').each(function() {
if (numRooms && numRooms != $(this).data('rooms')) {
$(this).slideUp();
} else {
$(this).slideDown();
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Rooms:
<select id="room-filter">
<option value="">Show All</option>
<option value="1">1 Room</option>
<option value="2">2 Rooms</option>
<option value="3">3 Rooms</option>
</select>
<div class="card text-left" data-rooms="1">
<div class="card-body d-flex" id="content-card">
<h2>Shack</h2>
<p class="main-text">1 room</p>
</div>
</div>
<div class="card text-left" data-rooms="1">
<div class="card-body d-flex" id="content-card">
<h2>Second Shack</h2>
<p class="main-text">1 room</p>
</div>
</div>
<div class="card text-left" data-rooms="3">
<div class="card-body d-flex" id="content-card">
<h2>Bungalo</h2>
<p class="main-text">3 rooms</p>
</div>
</div>