JSFiddle - React, Tailwind, and code Playground

HTML

<div class="space">
  <img id="space" src="">
</div>
        <ul class="toggle-controls">
            <li><img src="https://pp.userapi.com/c844616/v844616089/8e4f1/c-7_WSUyYpY.jpg?ava=1" alt=""></li>
            <li><img src="img/2.png" alt=""></li>
            <li><img src="img/3.png" alt=""></li>
            <li><img src="img/4.png" alt=""></li>
            <li><img src="img/5.png" alt=""></li>
            <li><img src="img/6.png" alt=""></li>
            <li><img src="img/7.png" alt=""></li>
        </ul>

CSS

.toggle-controls{
    display: flex;
    width: 250px;
    justify-content:space-around;
}

li{
   border:1px solid black;
   width:20px;
   height: 20px;
   border-radius: 50%;
   cursor: pointer;
   list-style: none;
   overflow: hidden;
}

body .active{
    border-color: red;
}

.space{
    width: 250px;
    height: 250px;
    border:2px solid black;
}

.varName{
    background: blue;
}

JavaScript

var controls = document.querySelectorAll('.toggle-controls li');
var space = document.querySelector('div.space');
var img_space = document.getElementById('space');

function toggleFilter(control) {
  
    for (var i = 0; i < controls.length; i++) {
        controls[i].classList.remove('active');
    }
  
    control.classList.add('active');
    //space.innerHTML = control.querySelector('img').src;
  	img_space.setAttribute("src", control.querySelector('img').src);
}

function clickControl(control) {
    control.addEventListener('click', function() {
        toggleFilter(control);
    });
}

for (var i = 0; i < controls.length; i++) {
    clickControl(controls[i]);
}