JSFiddle - React, Tailwind, and code Playground
HTML
<div class="items-section" tc-row="1">
<div class="item" tc-number="1"></div>
<div class="item" tc-number="2"></div>
<div class="item" tc-number="3"></div>
<div class="item" tc-number="4"></div>
<div class="item" tc-number="5"></div>
<div class="item" tc-number="6"></div>
<div class="item" tc-number="7"></div>
<div class="item" tc-number="8"></div>
<div class="item" tc-number="9"></div>
<div class="item" tc-number="10"></div>
<div class="item" tc-number="11"></div>
<div class="item" tc-number="12"></div>
<div class="item" tc-number="13"></div>
<div class="item" tc-number="14"></div>
<div class="item" tc-number="15"></div>
<div class="item" tc-number="16"></div>
</div>
SCSS
div.items-section {
display: flex;
flex-direction:row;
justify-content:space-between;
.item {
width: 25px;
height: 25px;
background-color:#333;
border-radius:50%;
cursor: pointer;
&--selected {
background-color:lighten(#333,40%);
}
&--near {
background-color:red;
}
}
}
JavaScript
function PlacesToJSON() {
}
$('.item').on('click',function() {
var row = $(this).parent().attr('tc-row');
var place = $(this).attr('tc-number');
var prev = $(this).prev('.item');
var next = $(this).next('.item');
var selectedClass = 'item--selected';
var nearClass = 'item--near';
var json = '';
// Если предыдущий и следующий кружки не являются выбранными
// то помечаем этот как выбранный
if (!prev.hasClass(selectedClass) && !next.hasClass(selectedClass)) {
$(this).addClass(selectedClass);
prev.addClass(nearClass);
next.addClass(nearClass);
// Если следующий элемент является выбранным
// то этот и предыдущий являются соседями.
} else if (next.hasClass(selectedClass)) {
$(this).addClass(selectedClass);
prev.addClass(nearClass);
} else if (prev.hasClass(selectedClass)){
$(this).addClass(selectedClass);
next.addClass(nearClass);
}
if ($(this).hasClass(nearClass)) {
$(this).removeClass(nearClass).addClass(selectedClass);
}
})