Не добавляется класс. Что делать?

Мне нужно, чтобы при клике к элементу добавлялся класс active, а с другого элемента убирался. Класс отлично убирается, но не добавляется. Вот код:

$(document).ready(function() {
	$('.icon-block').click (function() {
		$('.active').removeClass ("active");
		$('this').addClass ("active");
	});

HTML если нужно

<div class="icon">
		<div class="container">
			<div class="row">
				<div class="col-xl-3 icon-block icon-block1">
					<a href="#"><img src="../img/icon1.png"></a>
					<p>Responsive <br> <span>Website</span></p>
				</div>
				<div class="col-xl-3 icon-block icon-block2 active">
					<a href="#"><img src="../img/icon2.png"></a>
					<p>Commerce <br> <span>Website</span></p>
				</div>
				<div class="col-xl-3 icon-block icon-block3">
					<a href="#"><img src="../img/icon3.png"></a>
					<p>Daily blog <br> <span>Website</span></p>
				</div>
				<div class="col-xl-3 icon-block icon-block4">
					<a href="#"><img src="../img/icon4.png"></a>
					<p>Searced dased <br> <span>Website</span></p>
				</div>
			</div>
		</div>
	</div>

CSS

.active {
			border: 2px solid rgb(223, 223, 223);
			border-bottom: none;
		}