How to make one of the li circles in .sidebar-nav change the background color to white when you click on one of the li in the .sidebar-menu, by adding the .actived class to it? Moreover, when one of the li in the .sidebar-menu is clicked, the circle from the .sidebar-nav should change color in accordance with the element that was clicked. For example, they clicked on the "Business card site" and the first circle lights up, clicked on the "Internet store" and the third circle lights up.

Site ct03638.tmweb.ru

Code jsfiddle.net/pjzs9uxw/

.actived {
    background-color:  #fff;
    transition: 0.3s;
}

 <section class="services" id="services">
            <div class="wrapper">
                <div class="content">
                    <div class="sidebar">
                        <h3>Наши услуги</h3>
                        <ul class="sidebar-menu">
                            <li id="business-card"><a href="#">Сайт-визитка</a></li>
                            <li id="landing"><a href="#">Landing page</a></li>
                            <li id="market"><a href="#">Интернет-магазин</a></li>
                            <li id="corp"><a href="#">Корпоративный сайт</a></li>
                            <li id="bitrix"><a href="#">1C Битрикс</a></li>
                            <li id="advertising"><a href="#">Контекстная реклама</a></li>
                            <li id="seo"><a href="#">SEO оптимизация</a></li>
                            <li id="promotion"><a href="#">Продвижение в соц. сетях</a></li>
                            <li id="marketing"><a href="#">Контент-маркетинг</a></li>
                        </ul>
                        <ul class="sidebar-nav">
                            <li class="business-card"></li>
                            <li class="landing"></li>
                            <li class="market"></li>
                            <li class="corp"></li>
                            <li class="bitrix"></li>
                            <li class="advertising"></li>
                            <li class="seo"></li>
                            <li class="promotion"></li>
                            <li class="marketing"></li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>

You can use index() of the li which is clicked then using that addClass to same li in your sidebar-nav ul.

Demo Code :

$('.sidebar-menu li a').on('click', function(e) {
  e.preventDefault()
  var index_ = $(this).closest("li").index() //get index
  $('.sidebar-nav li').removeClass('actived');//remove from other
  $(".sidebar-nav li:eq(" + index_ + ")").addClass('actived'); //add class where index is same
});

.actived {
  background-color: red;
  transition: 0.3s;
}

.sidebar-nav li {
  width: 7px;
  height: 7px;
  border: 1px solid black;
  border-radius: 50px;
  margin-right: 5px;
  cursor: pointer;
}

.sidebar-nav {
  list-style: none;
  display: flex;
  justify-content: flex-start;
  margin-left: 120px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<section class="services" id="services">
  <div class="wrapper">
    <div class="content">
      <div class="sidebar">
        <h3>Наши услуги</h3>
        <ul class="sidebar-menu">
          <li id="business-card"><a href="#">Сайт-визитка</a></li>
          <li id="landing"><a href="#">Landing page</a></li>
          <li id="market"><a href="#">Интернет-магазин</a></li>
          <li id="corp"><a href="#">Корпоративный сайт</a></li>
          <li id="bitrix"><a href="#">1C Битрикс</a></li>
          <li id="advertising"><a href="#">Контекстная реклама</a></li>
          <li id="seo"><a href="#">SEO оптимизация</a></li>
          <li id="promotion"><a href="#">Продвижение в соц. сетях</a></li>
          <li id="marketing"><a href="#">Контент-маркетинг</a></li>
        </ul>
        <ul class="sidebar-nav">
          <li class="business-card"></li>
          <li class="landing"></li>
          <li class="market"></li>
          <li class="corp"></li>
          <li class="bitrix"></li>
          <li class="advertising"></li>
          <li class="seo"></li>
          <li class="promotion"></li>
          <li class="marketing"></li>
        </ul>
      </div>
    </div>
  </div>
</section>

Add click event listener on sidebar-menu ul element and capture the index of clicked li element, then get the circle element of same index and add active class on it and remove the active class from previous highlighted element.

const menuEle = document.querySelector("#side-menu");
let higlightedIndex = -1;

menuEle.addEventListener("click", (e) => {
  const listItem = e.target.closest("li");
  if (listItem) {
    const index = [...menuEle.children].indexOf(listItem);
    const list = document.querySelector("#sidebar-nav").children;
    if (higlightedIndex >= 0) {
      list[higlightedIndex].classList.remove("active");
    }
    list[index].classList.add("active");
    higlightedIndex = index;
  }
});

.active {
    background-color: #FAE93E;
}

.circle {
  width: 20px;
  height: 20px;
  border: 1px solid black; 
  border-radius: 50%;
  display: inline-block;
}

<section class="services" id="services">
            <div class="wrapper">
                <div class="content">
                    <div class="sidebar">
                        <h3>Наши услуги</h3>
                        <ul class="sidebar-menu" id="side-menu">
                            <li id="business-card"><a href="#">Сайт-визитка</a></li>
                            <li id="landing"><a href="#">Landing page</a></li>
                            <li id="market"><a href="#">Интернет-магазин</a></li>
                            <li id="corp"><a href="#">Корпоративный сайт</a></li>
                            <li id="bitrix"><a href="#">1C Битрикс</a></li>
                            <li id="advertising"><a href="#">Контекстная реклама</a></li>
                            <li id="seo"><a href="#">SEO оптимизация</a></li>
                            <li id="promotion"><a href="#">Продвижение в соц. сетях</a></li>
                            <li id="marketing"><a href="#">Контент-маркетинг</a></li>
                        </ul>
                        <div id="sidebar-nav">
                            <span class="business-card circle"></span>
                            <span class="landing circle"></span>
                            <span class="market circle"></span>
                            <span class="corp circle"></span>
                            <span class="bitrix circle"></span>
                            <span class="advertising circle"></span>
                            <span class="seo circle"></span>
                            <span class="promotion circle"></span>
                            <span class="marketing circle"></span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

On the click function of your button, try adding a line that sets a class or an attribute to the parent menu element related to this current item. This way you can apply different styles according to the current menu item to the whole menu.