JSFiddle - React, Tailwind, and code Playground

HTML

<span>Сортировка: </span>
  <div class="list">
    <ul>
     <li><p class="sort_sub" id="raiting">Заголовок</p></li>
     <li><p class="sort_sub" id="name">Название</p></li>
     <li><p class="sort_sub" id="price">Цена</li>
    </ul>
   </div>

CSS

ul, li {margin: 0 12px; padding:0; list-style: none;float:left;}
sort_list {

}
.sort_bar li {
  
  margin: 0 10px;
  cursor: pointer;
  border-bottom: 1px dashed rgba(252,252,252,.3);
}
.sort_sub:after {
  background: url(http://s017.radikal.ru/i431/1510/18/2123728d15bd.png) no-repeat 0 0;
  content: '';
  width: 10px;
  height: 10px;
  /* top: 31%; */
  margin-left: 7px;
  margin-top: 7px;
  position: absolute;
}
.sort_sub:hover:after {
  background: url(http://s020.radikal.ru/i710/1510/1e/b47e2acf1f7c.png) no-repeat 0 0;
}

JavaScript

$(".list p").click(function() {
    var id = $(this).attr('id');
    $("#load").fadeIn(1000,function () {
      $.ajax({
        url:'/index.php',
        data:'sortby_id='+id,
        type:'get',
        dataType:'json',
        success:function(html) {
          $("#main").html('');
          for(value in html) {
             $("#main").append(
                        'тут добавляются данные'
                      );
                }
          $("#main").hide().fadeIn(2000);
          $("#load").fadeOut(1000);
        }
      });
    });
  });

//PHP CODE 

  $query = 'SELECT * FROM books';
  if($id) {
    if($id == 'name') {
      $query .= ' ORDER BY name ASC';
    }
  }