How to stop other divs from still showing when i click a different button?

Question

I have a grid of 12 buttons with a set of 12 divs. When I click button 1 div 1 appears ! correct. However, when I click button 2 div 2 appears, great. However, button one still exists. How do I make it so that when I click button 2 div 1 is display none and div 2 is displaying.

Below is what I have tried, I have thought about adding the remove class to every click function for every div if that makes sense.

document.addEventListener('DOMContentLoaded', function() {
  jQuery(function($) {
    $('.clicktoshow').click(function() {
      if ($('.service-wrapper-box').hasClass('showclick')) {
        $('.service-wrapper-box').removeClass('showclick')
      } else {
        $('.service-wrapper-box').addClass('showclick')
      }
    });
  });
  jQuery(function($) {
    $('.clicktoshow2').click(function() {
      if ($('.service-wrapper-box2').hasClass('showclick2')) {
        $('.service-wrapper-box2').removeClass('showclick2')
      } else {
        $('.service-wrapper-box2').addClass('showclick2')
      }
    });
  });
  jQuery(function($) {
    $('.clicktoshow3').click(function() {
      if ($('.service-wrapper-box3').hasClass('showclick3')) {
        $('.service-wrapper-box3').removeClass('showclick3')
      } else {
        $('.service-wrapper-box3').addClass('showclick3')
      }
    });
  });
  jQuery(function($) {
    $('.clicktoshow4').click(function() {
      if ($('.service-wrapper-box4').hasClass('showclick4')) {
        $('.service-wrapper-box4').removeClass('showclick4')
      } else {
        $('.service-wrapper-box4').addClass('showclick4')
      }
    });
  });
  jQuery(function($) {
    $('.clicktoshow5').click(function() {
      if ($('.service-wrapper-box5').hasClass('showclick5')) {
        $('.service-wrapper-box5').removeClass('showclick5')
      } else {
        $('.service-wrapper-box5').addClass('showclick5')
      }
    });
  });
  jQuery(function($) {
    $('.clicktoshow6').click(function() {
      if ($('.service-wrapper-box6').hasClass('showclick6')) {
        $('.service-wrapper-box6').removeClass('showclick6')
      } else {
        $('.service-wrapper-box6').addClass('showclick6')
      }
    });
  });
  jQuery(function($) {
    $('.clicktoshow7').click(function() {
      if ($('.service-wrapper-box7').hasClass('showclick7')) {
        $('.service-wrapper-box7').removeClass('showclick7')
      } else {
        $('.service-wrapper-box7').addClass('showclick7')
      }
    });
  });
  jQuery(function($) {
    $('.clicktoshow8').click(function() {
      if ($('.service-wrapper-box8').hasClass('showclick8')) {
        $('.service-wrapper-box8').removeClass('showclick8')
      } else {
        $('.service-wrapper-box8').addClass('showclick8')
      }
    });
  });
  jQuery(function($) {
    $('.clicktoshow9').click(function() {
      if ($('.service-wrapper-box9').hasClass('showclick9')) {
        $('.service-wrapper-box9').removeClass('showclick9')
      } else {
        $('.service-wrapper-box9').addClass('showclick9')
      }
    });
  });
  jQuery(function($) {
    $('.clicktoshow0').click(function() {
      if ($('.service-wrapper-box0').hasClass('showclick0')) {
        $('.service-wrapper-box0').removeClass('showclick0')
      } else {
        $('.service-wrapper-box0').addClass('showclick0')
      }
    });
  });
  jQuery(function($) {
    $('.clicktoshow1').click(function() {
      if ($('.service-wrapper-box1').hasClass('showclick1')) {
        $('.service-wrapper-box1').removeClass('showclick1')
      } else {
        $('.service-wrapper-box1').addClass('showclick1')
      }
    });
  });
  jQuery(function($) {
    $('.clicktoshow10').click(function() {
      if ($('.service-wrapper-box10').hasClass('showclick10')) {
        $('.service-wrapper-box10').removeClass('showclick10')
      } else {
        $('.service-wrapper-box10').addClass('showclick10')
      }
    });
  });
});

.clicktoshow,
.clicktoshow2,
.clicktoshow3,
.clicktoshow4,
.clicktoshow5,
.clicktoshow6,
.clicktoshow7,
.clicktoshow8,
.clicktoshow9,
.clicktoshow0,
.clicktoshow1,
.clicktoshow10 {
  cursor: pointer;
}

.showclick,
.showclick2,
.showclick3,
.showclick4,
.showclick5,
.showclick6,
.showclick7,
.showclick8,
.showclick9,
.showclick0,
.showclick1,
.showclick10 {
  display: flex !important;
}

.service-wrapper-box,
.service-wrapper-box2,
.service-wrapper-box3,
.service-wrapper-box4,
.service-wrapper-box5,
.service-wrapper-box6,
.service-wrapper-box7,
.service-wrapper-box8,
.service-wrapper-box9,
.service-wrapper-box0,
.service-wrapper-box1,
.service-wrapper-box10 {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="clicktoshow"> CLick to show</div>
<div class="clicktoshow2"> click to show</div>

<div class=".service-wrapper-box" style="background-color:red;"></div>
<div class="service-wrapper-box2" style="background-color:blue;"></div>