jQuery .on (click) функция, содержащая оператор IF, проверяющий .hasClass (), всегда возвращающий true, если он не содержит класс?

Question

Я боролся с хитрым IF, который продолжает возвращать истинное значение, хотя проверяемый им класс не присутствует при загрузке страницы.

Я пытаюсь добавить класс, если его там нет, тогда удалите класс, когда он там есть.

В файле console.logs показано, что он правильно захватывает атрибуты для значения с популярным значением и полный, успешно регистрируя их в соответствующих файлах console.logs. Однако, если IF всегда console.logs 'имеет класс'.

Вот функция:

$(document).on("click", ".popular-tag", function(){
    var popularTag = $(this);
    var popularTagSlug = popularTag.attr('popular-value');
    console.log(popularTagSlug);
    var popularTagName = popularTag.attr('popular-full');
    console.log(popularTagName);

    if (popularTag.hasClass('selected')) {
        console.log('has class');
        popularTag.removeClass('selected');
        popularTag.removeClass('selected-tag');
        popularTag.removeAttr('data-slug');
        popularTag.removeAttr('data-name');
    } else {
        console.log('doesnt have class');
        popularTag.addClass('selected');
        popularTag.addClass('selected-tag');
        popularTag.attr('data-slug', popularTagSlug);
        popularTag.attr('data-name', popularTagName);
    }
});

Вот то, с чем HTML играет (ПЕРЕД НАЖМИТЕ):

<div class="popular-tags-selection">

    <div class="popular-tags-selection-title">
        Popular properties
    </div>

    <div id="popular-tags" class="popular-tags">

        <div class="search-tag popular-tag" popular-value="aesthetic" popular-full="Aesthetic"><div class="popular-tag-title">Aesthetic</div></div>
        <div class="search-tag popular-tag" popular-value="corrosion-resistant" popular-full="Corrosion resistant"><div class="popular-tag-title">Corrosion resistant</div></div>
        <div class="search-tag popular-tag" popular-value="hard" popular-full="Hard"><div class="popular-tag-title">Hard</div></div>

    </div>

</div>

Это тот же код (ПОСЛЕ ЩЕЛЧКА):

<div class="popular-tags-selection">

    <div class="popular-tags-selection-title">
        Popular properties
    </div>

    <div id="popular-tags" class="popular-tags">

        <div class="search-tag popular-tag" popular-value="aesthetic" popular-full="Aesthetic"><div class="popular-tag-title">Aesthetic</div></div>
        <div class="search-tag popular-tag" popular-value="corrosion-resistant" popular-full="Corrosion resistant"><div class="popular-tag-title">Corrosion resistant</div></div>
        <div class="search-tag popular-tag" popular-value="hard" popular-full="Hard"><div class="popular-tag-title">Hard</div></div>

    </div>

</div>

Это консоль после двух щелчков:

11:55:17.801 ready-functions.js?200226115513:448 aesthetic
11:55:17.989 ready-functions.js?200226115513:450 Aesthetic
11:55:17.989 ready-functions.js?200226115513:453 has class
11:55:18.801 ready-functions.js?200226115513:448 aesthetic
11:55:18.801 ready-functions.js?200226115513:450 Aesthetic
11:55:18.801 ready-functions.js?200226115513:453 has class

Почему это всегда говоришь, что класс 'выбранный' есть?

Я ценю, что я, вероятно, глупый, ценю всех, Джейсон.

$(document).on("click", ".popular-tag", function(){
		var popularTag = $(this);
		var popularTagSlug = popularTag.attr('popular-value');
		console.log(popularTagSlug);
		var popularTagName = popularTag.attr('popular-full');
		console.log(popularTagName);

		if (popularTag.hasClass('selected')) {
			console.log('has class');
			popularTag.removeClass('selected');
			popularTag.removeClass('selected-tag');
			popularTag.removeAttr('data-slug');
			popularTag.removeAttr('data-name');
		} else {
			console.log('doesnt have class');
			popularTag.addClass('selected');
			popularTag.addClass('selected-tag');
			popularTag.attr('data-slug', popularTagSlug);
			popularTag.attr('data-name', popularTagName);
		}
	});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="popular-tags-selection">

		<div class="popular-tags-selection-title">
			Popular properties
		</div>

		<div id="popular-tags" class="popular-tags">

			<div class="search-tag popular-tag" popular-value="aesthetic" popular-full="Aesthetic"><div class="popular-tag-title">Aesthetic</div></div>
			<div class="search-tag popular-tag" popular-value="corrosion-resistant" popular-full="Corrosion resistant"><div class="popular-tag-title">Corrosion resistant</div></div>
			<div class="search-tag popular-tag" popular-value="hard" popular-full="Hard"><div class="popular-tag-title">Hard</div></div>

		</div>

	</div>

После добавления этого фрагмента в скрипку он работает. Кто-нибудь знает, как я могу go об устранении неполадок, чтобы я мог выяснить, почему это не работает, как запланировано?

РЕДАКТИРОВАТЬ (добавление полного jQuery, чтобы помочь дальнейшему устранению неполадок) - Этот код в двух словах представляет собой выпадающий список тегов, пару популярных тегов, а затем элемент div, который содержит выбранные теги из ранее указанных двух разделов. Затем я добавляю функциональность, которая будет добавлять и удалять классы тегов в каждом из экземпляров тегов, будь то раскрывающийся список тегов, популярные теги или выбранные теги:

// TAG DROPDOWN TAGS
	$(document).on("click", ".search-tag", function(e){
		e.stopPropagation();
		var searchTag = $(this);
		var searchTagSlug = searchTag.attr('value');
		var searchTagName = searchTag.attr('name');

		if (searchTag.hasClass('selected')) {
			searchTag.removeClass('selected');
			searchTag.removeClass('selected-tag');
			searchTag.removeAttr('data-slug');
			searchTag.removeAttr('data-name');
		} else {
			searchTag.addClass('selected');
			searchTag.addClass('selected-tag');
			searchTag.attr('data-slug', searchTagSlug);
			searchTag.attr('data-name', searchTagName);
		}

		var popularTags = $('#popular-tags');
		var alsoPopularTag = popularTags.children('[popular-value=' + searchTagSlug + ']');
		if (alsoPopularTag.length) {
			if (alsoPopularTag.hasClass('selected')) {
				alsoPopularTag.removeClass('selected');
				alsoPopularTag.removeClass('selected-tag');
				alsoPopularTag.removeAttr('data-slug');
				alsoPopularTag.removeAttr('data-name');
			} else {
				alsoPopularTag.addClass('selected');
				alsoPopularTag.addClass('selected-tag');
				alsoPopularTag.attr('data-slug', searchTagSlug);
				alsoPopularTag.attr('data-name', searchTagName);
			}
		}

		var selectedTags = $('#selected-tags');
		var alsoSelectedTag = selectedTags.children('[data-selected-tag-slug=' + searchTagSlug + ']');
		if (alsoSelectedTag.length) {
			alsoSelectedTag.remove();
		} else {
			selectedTags.prepend('<div class="selected-tag-quick" data-slug="' + searchTagSlug + '" data-name="' + searchTagName + '" data-selected-tag-slug="' + searchTagSlug + '" data-selected-tag-name="' + searchTagName + '"><div class="selected-tag-quick-name">' + searchTagName +'</div></div>');
		}
	});
	// END TAG DROPDOWN TAGS

	// POPULAR TAGS
	$(document).on("click", ".popular-tag", function(){
		var popularTag = $(this);
		var popularTagSlug = popularTag.attr('popular-value');
		console.log(popularTagSlug);
		var popularTagName = popularTag.attr('popular-full');
		console.log(popularTagName);

		if (popularTag.hasClass('selected')) {
			console.log('has class');
			popularTag.removeClass('selected');
			popularTag.removeClass('selected-tag');
			popularTag.removeAttr('data-slug');
			popularTag.removeAttr('data-name');
		} else {
			console.log('doesnt have class');
			popularTag.addClass('selected');
			popularTag.addClass('selected-tag');
			popularTag.attr('data-slug', popularTagSlug);
			popularTag.attr('data-name', popularTagName);
		}

		var searchTags = $('#search-tags-list');
		var alsoSearchTag = searchTags.children('[value=' + popularTagSlug + ']');
		if (alsoSearchTag.length) {
			if (alsoSearchTag.hasClass('selected')) {
				alsoSearchTag.removeClass('selected');
				alsoSearchTag.removeClass('selected-tag');
				alsoSearchTag.removeAttr('data-slug');
				alsoSearchTag.removeAttr('data-name');
			} else {
				alsoSearchTag.addClass('selected');
				alsoSearchTag.addClass('selected-tag');
				alsoSearchTag.attr('data-slug', popularTagSlug);
				alsoSearchTag.attr('data-name', popularTagName);
			}
		}

		var selectedTags = $('#selected-tags');
		var alsoSelectedTag = selectedTags.children('[data-selected-tag-slug=' + popularTagSlug + ']');
		if (alsoSelectedTag.length) {
			alsoSelectedTag.remove();
		} else {
			selectedTags.prepend('<div class="selected-tag-quick" data-slug="' + popularTagSlug + '" data-name="' + popularTagName + '" data-selected-tag-slug="' + popularTagSlug + '" data-selected-tag-name="' + popularTagName + '"><div class="selected-tag-quick-name">' + popularTagName +'</div></div>');
		}
	});
	// END POPULAR TAGS

	// SELECTED TAGS
	$(document).on("click", ".selected-tag-quick", function(e){
		var selectedTag = $(this);
		var selectedTagSlug = selectedTag.attr('data-selected-tag-slug');
		var selectedTagName = selectedTag.attr('data-selected-tag-name');

		selectedTag.remove();

		var searchTags = $('#search-tags-list');
		var alsoSearchTag = searchTags.children('[value=' + selectedTagSlug + ']');
		if (alsoSearchTag.length) {
			if (alsoSearchTag.hasClass('selected')) {
				alsoSearchTag.removeClass('selected');
				alsoSearchTag.removeClass('selected-tag');
				alsoSearchTag.removeAttr('data-slug');
				alsoSearchTag.removeAttr('data-name');
			} else {
				alsoSearchTag.addClass('selected');
				alsoSearchTag.addClass('selected-tag');
				alsoSearchTag.attr('data-slug', selectedTagSlug);
				alsoSearchTag.attr('data-name', selectedTagName);
			}
		}

		var popularTags = $('#popular-tags');
		var alsoPopularTag = popularTags.children('[data-value=' + selectedTagSlug + ']');
		if (alsoPopularTag.length) {
			if (alsoPopularTag.hasClass('selected')) {
				alsoPopularTag.removeClass('selected');
				alsoPopularTag.removeClass('selected-tag');
				alsoPopularTag.removeAttr('data-slug');
				alsoPopularTag.removeAttr('data-name');
			} else {
				alsoPopularTag.addClass('selected');
				alsoPopularTag.addClass('selected-tag');
				alsoPopularTag.attr('data-slug', selectedTagSlug);
				alsoPopularTag.attr('data-name', selectedTagName);
			}
		}
	});
	// END SELECTED TAGS

.search-properties {
padding: 50px;
background-color: green;
margin: 0 auto 30px auto;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
}

.tags-selection {
margin-right: 20px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
}

.tags-selection-title {
padding: 0 10px 0 0;
}

.search-tags {
max-width: 280px;
color: #ffffff;
}

.search-tags-title {
width: 100%;
min-width: 280px;
height: auto;
border: 1px solid #007dbe;
border-bottom: 1px dashed #007dbe;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}

.search-tags-dropdown-image {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

.search-tags-title.open .search-tags-dropdown-image {
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}

.search-tag {
width: 100%;
height: auto;
cursor: pointer;
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.popular-tags .search-tag {
width: auto;
height: 50px;
}

.search-tags-list {
width: 100%;
max-height: 400px;
background-color: #000041;
border-left: 1px solid #007dbe;
border-right: 1px solid #007dbe;
border-bottom: 1px solid #007dbe;
overflow: auto;
z-index: 1000;
}

.search-tags-list > div:nth-of-type(n + 2){
border-top: 1px solid #ffffff;
}

.search-tag-title {
width: calc((100% - 50px) - 10px);
margin-right: 10px;
padding: 10px;
text-align: left;
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}


.search-tags-title .search-tag-title {
color: #007dbe;
}

.search-tags-dropdown {
width: 50px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
}

.search-tags-dropdown-image {
width: 40px;
height: 40px;
margin: 5px;
}

.tick-box {
width: 40px;
height: 40px;
margin: 5px;
border: 1px solid #ffffff;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

.search-tag.selected .tick-box {
background-color: rgba(112,182,44,1);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.search-tag .tick-box:after {
content: '✔';
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 24px;
color: transparent;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.search-tag.selected .tick-box:after {
color: #ffffff;
}

.popular-tags-selection {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
}

.popular-tags-selection-title {
padding: 0 5px 0 0;
}

.popular-tags {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
}

.popular-tag {
padding: 10px;
margin: 0 5px;
border: 1px solid #007dbe;
border-radius: 10px;
color: #007dbe;
cursor: pointer;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.popular-tag.selected-tag {
color: white;
border: 1px solid white;
}

#selected-tags {
width: 100%;
color: #ffffff;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
}

#selected-tags:not(:empty) {
margin: 20px auto 0 auto;
}

#selected-tags:not(:empty):before {
content: 'Properties Selected:';
margin-right: 5px;
color: #007dbe;
}

#selected-tags .selected-tag-quick {
height: 50px;
padding: 10px;
margin: 5px;
border: 1px solid #ffffff;
border-radius: 10px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
cursor: pointer;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

.popular-tag.selected-tag:hover,
#selected-tags .selected-tag-quick:hover {
color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-properties">
					
		<div class="tags-selection">

			<div class="tags-selection-title">
				Properties
			</div>

			<div id="search-tags" class="search-tags">

				<div id="search-tags-title" class="search-tags-title">
					<div class="search-tag-title">Select Properties</div>
					<div class="search-tags-dropdown"><img src="/wp-content/themes/hubble-space/assets/img/blue-chevvy-right.svg" class="search-tags-dropdown-image" alt="Show Tags List"></div>
				</div>

				<div id="search-tags-list" class="search-tags-list">
					<div class="search-tag" value="abrasion-resistant" name="Abrasion resistant"><div class="search-tag-title">Abrasion resistant</div><div class="tick-box tag-tick-box"></div></div><div class="search-tag" value="acoustic" name="Acoustic"><div class="search-tag-title">Acoustic</div><div class="tick-box tag-tick-box"></div></div><div class="search-tag" value="aesthetic" name="Aesthetic"><div class="search-tag-title">Aesthetic</div><div class="tick-box tag-tick-box"></div></div>
				</div>

			</div>

		</div>

		<div class="popular-tags-selection">

			<div class="popular-tags-selection-title">
				Popular properties
			</div>

			<div id="popular-tags" class="popular-tags">

				<div class="search-tag popular-tag" popular-value="aesthetic" popular-full="Aesthetic"><div class="popular-tag-title">Aesthetic</div></div>

			</div>

		</div>

		<div id="selected-tags"></div>

	</div>

РЕДАКТИРОВАТЬ (РЕШЕНИЕ) - я синхронизировал все атрибуты данных, чтобы использовать один и тот же data-attr = '' Затем пишется один блок кода, который обрабатывает все условия. Гораздо чище и прекратил конфликт:

// TAGS SELECTION
$(document).on("click", "[value]", function(e){
	e.stopPropagation();

	var clickedTag = $(this);
	var clickedTagSlug = clickedTag.attr('value');
	var clickedTagName = clickedTag.attr('full');
	var clickedTags = $('.search-tag[value=' + clickedTagSlug + ']');
	var selectedClickedTag = $('.quick-selected-tag[value=' + clickedTagSlug + ']');
	var selectedTags = $('#selected-tags');

	clickedTags.each(function(){
		if ($(this).hasClass('selected')) {
			$(this).removeClass('selected');
			$(this).removeClass('selected-tag');
			$(this).removeAttr('data-slug');
			$(this).removeAttr('data-name');
		} else {
			$(this).addClass('selected');
			$(this).addClass('selected-tag');
			$(this).attr('data-slug', clickedTagSlug);
			$(this).attr('data-name', clickedTagName);
		}
	});

	if (selectedClickedTag.length) {
		selectedClickedTag.remove();
	} else {
		selectedTags.prepend('<div class="quick-selected-tag" data-slug="' + clickedTagSlug + '" data-name="' + clickedTagName + '" value="' + clickedTagSlug + '" full="' + clickedTagName + '"><div class="quick-selected-tag-name">' + clickedTagName +'</div></div>');
	}
});
// END TAGS SELECTION

.search-properties {
padding: 50px;
background-color: green;
margin: 0 auto 30px auto;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
}

.tags-selection {
margin-right: 20px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
}

.tags-selection-title {
padding: 0 10px 0 0;
}

.search-tags {
max-width: 280px;
color: #ffffff;
}

.search-tags-title {
width: 100%;
min-width: 280px;
height: auto;
border: 1px solid #007dbe;
border-bottom: 1px dashed #007dbe;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
cursor: pointer;
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}

.search-tags-dropdown-image {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

.search-tags-title.open .search-tags-dropdown-image {
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}

.search-tag {
width: 100%;
height: auto;
cursor: pointer;
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}
.popular-tags .search-tag {
width: auto;
height: 50px;
}

.search-tags-list {
width: 100%;
max-height: 400px;
background-color: #000041;
border-left: 1px solid #007dbe;
border-right: 1px solid #007dbe;
border-bottom: 1px solid #007dbe;
overflow: auto;
z-index: 1000;
}

.search-tags-list > div:nth-of-type(n + 2){
border-top: 1px solid #ffffff;
}

.search-tag-title {
width: calc((100% - 50px) - 10px);
margin-right: 10px;
padding: 10px;
text-align: left;
position: relative;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: flex-start;
}


.search-tags-title .search-tag-title {
color: #007dbe;
}

.search-tags-dropdown {
width: 50px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
}

.search-tags-dropdown-image {
width: 40px;
height: 40px;
margin: 5px;
}

.tick-box {
width: 40px;
height: 40px;
margin: 5px;
border: 1px solid #ffffff;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

.search-tag.selected .tick-box {
background-color: rgba(112,182,44,1);
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.search-tag .tick-box:after {
content: '✔';
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
font-size: 24px;
color: transparent;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.search-tag.selected .tick-box:after {
color: #ffffff;
}

.popular-tags-selection {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
}

.popular-tags-selection-title {
padding: 0 5px 0 0;
}

.popular-tags {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
}

.popular-tag {
padding: 10px;
margin: 0 5px;
border: 1px solid #007dbe;
border-radius: 10px;
color: #007dbe;
cursor: pointer;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.popular-tag.selected-tag {
color: white;
border: 1px solid white;
}

#selected-tags {
width: 100%;
color: #ffffff;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
}

#selected-tags:not(:empty) {
margin: 20px auto 0 auto;
}

#selected-tags:not(:empty):before {
content: 'Properties Selected:';
margin-right: 5px;
color: #007dbe;
}

#selected-tags .selected-tag-quick {
height: 50px;
padding: 10px;
margin: 5px;
border: 1px solid #ffffff;
border-radius: 10px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
flex-direction: row;
align-items: center;
justify-content: center;
cursor: pointer;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}

.popular-tag.selected-tag:hover,
#selected-tags .selected-tag-quick:hover {
color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="search-properties">
	
	<div class="tags-selection">

		<div class="tags-selection-title">
			Properties
		</div>

		<div id="search-tags" class="search-tags">

			<div id="search-tags-title" class="search-tags-title">
				<div class="search-tag-title">Select Properties</div>
				<div class="search-tags-dropdown"><img src="/wp-content/themes/hubble-space/assets/img/blue-chevvy-right.svg" class="search-tags-dropdown-image" alt="Show Tags List"></div>
			</div>

			<div id="search-tags-list" class="search-tags-list">
				<div class="search-tag" value="abrasion-resistant" full="Abrasion resistant"><div class="search-tag-title">Abrasion resistant</div><div class="tick-box tag-tick-box"></div></div>
				<div class="search-tag" value="acoustic" full="Acoustic"><div class="search-tag-title">Acoustic</div><div class="tick-box tag-tick-box"></div></div>
				<div class="search-tag" value="aesthetic" full="Aesthetic"><div class="search-tag-title">Aesthetic</div><div class="tick-box tag-tick-box"></div></div>
			</div>

		</div>

	</div>

	<div class="popular-tags-selection">

		<div class="popular-tags-selection-title">
			Popular properties
		</div>

		<div id="popular-tags" class="popular-tags">

			<div class="search-tag popular-tag" value="aesthetic" full="Aesthetic"><div class="popular-tag-title">Aesthetic</div></div>

		</div>

	</div>

	<div id="selected-tags"></div>

</div>

Спасибо за предоставленную мне возможность разобраться в этом месте, надеюсь, кто-то еще найдет это полезным, Джейсон.