JSFiddle - React, Tailwind, and code Playground

by Pratik Galoria

HTML

<div>
  <div>
    <input type="radio" name="type" value="flat" checked='checked' />Flat
    <input type="radio" name="type" value="house" />House
  </div>
  <div>
    <input type="radio" name="location" value="city1" checked='checked' />City1
    <input type="radio" name="location" value="city2" />City2
    <input type="radio" name="location" value="city3" />City3
  </div>
  <div>

    Price to:
    <select name="price">
      <option value="300000">300000</option>
      <option value="400000">400000</option>
      <option value="500000">590000</option>
    </select>
    <div>
      <input type="radio" name="sort" value="01" />Low to high
      <input type="radio" name="sort" value="10" checked="checked" />High to low
    </div>
    <div>
      <a href="#" id="filter">Filter</a>
      <a href="#" id="clear">Clear</a>
    </div>
    <ul class="items">
      <li location='city1' type='flat' price='540000' data-position="6">Item1</li>
      <li location='city1' type='house' price='310000' data-position="3">Item2</li>
      <li location='city2' type='flat' price='420000' data-position="4">Item3</li>
      <li location='city3' type='flat' price='502000' data-position="5">Item4</li>
      <li location='city3' type='house' price='30000' data-position="2">Item5</li>
      <li location='city1' type='house' price='23000' data-position="1">Item6</li>
    </ul>

JavaScript

$('#filter').click(function() {
  var _typeFilter = $('input[name=type]:checked').val();
  var _locationFilter = $('input[name=location]:checked').val();
  var _priceFilter = $('option:selected', 'select[name=price]').val();
  var _sortingOrder = $('input[name=sort]:checked').val();

  $('.items li').each(function() {
    if ($(this).filter('[type=' + _typeFilter + ']').filter('[location=' + _locationFilter + ']').filter(function() {
        return $(this).attr("Price") <= _priceFilter;
      }).length > 0)

      $(this).show();
    else
      $(this).hide();
  });
  $(".items li").sort(sort_li).appendTo('.items');

  function sort_li(a, b) {
    if (_sortingOrder == "01") {
      return ($(b).attr('price')) < ($(a).attr('price')) ? 1 : -1;
    } else {
      return ($(b).attr('price')) > ($(a).attr('price')) ? 1 : -1;
    }
  }
});

$('#clear').click(function() {
  $('.items li').show();
});