ajax category sorting

<div id="grid-posts">
	<form id="grid-posts-block" action="https://dev.itlvl.com/nashi-raboty/" method="get" style="">
		<div id="tabs-bar" class="grid-posts__block">
			<ul id="tabs-nav">
				<li>
					<input class="js-submit-form" id="service-id-all" type="radio" name="service-id" value="all" checked="checked">
					<label class="btn-3" for="service-id-all"><span>Все</span></label>
				</li>
				<li>
					<input class="js-submit-form" id="service-id-63" type="radio" name="service-id" value="63">
					<label class="btn-3" for="service-id-63"><span>Ведение социальных сетей</span></label>
				</li>
				<li>
					<input class="js-submit-form" id="service-id-52" type="radio" name="service-id" value="52">
					<label class="btn-3" for="service-id-52"><span>Веб-дизайн</span></label>
				</li>
				<li>
					<input class="js-submit-form" id="service-id-51" type="radio" name="service-id" value="51">
					<label class="btn-3" for="service-id-51"><span>Корпоративный стиль</span></label>
				</li>
				<li>
					<input class="js-submit-form" id="service-id-49" type="radio" name="service-id" value="49">
					<label class="btn-3" for="service-id-49"><span>Логотип</span></label>
				</li>
				<li>
					<input class="js-submit-form" id="service-id-64" type="radio" name="service-id" value="64">
					<label class="btn-3" for="service-id-64"><span>Доработка сайта</span></label>
				</li>
				<li>
					<input class="js-submit-form" id="service-id-42" type="radio" name="service-id" value="42">
					<label class="btn-3" for="service-id-42"><span>SMM продвижение</span></label>
				</li>
				<li>
					<input class="js-submit-form" id="service-id-41" type="radio" name="service-id" value="41">
					<label class="btn-3" for="service-id-41"><span>SEO продвижение</span></label>
				</li>
				<li>
					<input class="js-submit-form" id="service-id-36" type="radio" name="service-id" value="36">
					<label class="btn-3" for="service-id-36"><span>Интернет магазин</span></label>
				</li>
				<li>
					<input class="js-submit-form" id="service-id-35" type="radio" name="service-id" value="35">
					<label class="btn-3" for="service-id-35"><span>Landing page</span></label>
				</li>
			</ul>
		</div>
	</form>

	<div class="grid-listing" style="opacity: 1;">
		<div id="posts-grid" class="grid-listing__row">
											
			<div class="flip">
				<div class="wrapp-flip">
					<div class="front"><img src="https://dev.itlvl.com/wp-content/uploads/2021/07/Mask-Group-2-350x350.jpg" alt=""></div>
					<div class="back">
						<h3>BITKIT</h3>
									<p class="description">Детские развивающие конструкторы</p>
								<div class="btn-animate__two">
							<a href="https://dev.itlvl.com/bitkit/">Подробнее</a>
						</div>
					</div>
				</div>
			</div>
			<div class="flip">
				<div class="wrapp-flip">
					<div class="front"><img src="https://dev.itlvl.com/wp-content/uploads/2021/07/male-boxer-boxing-punching-bag-1-350x350.jpg" alt=""></div>
					<div class="back">
						<h3>BitKit1</h3>
									<p class="description">BitKit</p>
								<div class="btn-animate__two">
							<a href="https://dev.itlvl.com/bitkit2/">Подробнее</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

</div>


<script>
$(function() {
  
  // Ссылка на форму которую надо грузить без перезагрузки страницы:
  var form = $('form[action="https://dev.itlvl.com/nashi-raboty/"]');
  
  // Вешаем на поля формы обработчик кликов:
  
  form.find('input[type="radio"]').click(async function(e) {
    
    e.preventDefault(); // Предотвращаем клик
    form.css('pointer-events', 'none'); // Блокрируем повторные клики
    
    // Формируем ссылку на страницу которая содержит данные кликнутого таба:
    var link = 'https://dev.itlvl.com/nashi-raboty/?' + $(this).attr('name') + '=' + $(this).val();
    
    var request = $.ajax(link); // Запускаем процесс загрузкки этой страницы
    
    // Пока грузится, делаем плавное исчезновение текущего таба:
    await $('.grid-listing').animate({ opacity: 0 }, 500).promise();
    
    // Получаем те данные что загрузили и меняем URL в браузере:
    var html = await request; history.pushState(null, null, link);
    
    // Удаляем атрибут активности со всех полей:
    form.find('input[type="radio"]').removeAttribute('checked');
    
    $(this).attr('checked', 'checked'); // Делаем активным текущий таб
    
    // Вставляем данные с нового таба на текущую страницу:
    
    var doc = new DOMParser().parseFromString(html, 'text/html');
    
    var html = $('.grid-listing', doc).html();
    $('.grid-listing').html(html);
    
    var html = $('.listing-page__pagination', doc).html();
    $('.listing-page__pagination').html(html);
    
    // Делаем плавное появление для вставленного контента:
    await $('.grid-listing').animate({ opacity: 1 }, 500).promise();
    
    form.css('pointer-events', ''); // Снимаем блокировку кликов
    
  });
  
});
</script>