How do I add a different class to an event and remove a class?

switch the background image when clicking on an icon, and then click another icon to change the previous image back. The background image currently clicked

, , , $(this).addClass("active").siblings().removeClass("active"),

before, I clicked on the icon above and then switched the background map, that is, through the class of active, but I could only switch between sheets. Click on the first icon. After clicking the second icon, I want to change the color of the first icon to its original appearance. Now what I do is I can only switch as a picture, but nothing else can be switched

html

    <div class="function-btn">
      <ul class="clearfix">
        <!--  -->
        <li class="function-btn-list index-list" @click="searchBtn">
          <div class="function-btn-list-icon flight">
          </div>
        </li>
        <!--  -->
        <li class="function-btn-list index-list" @click="plantBtn">
          <div class="function-btn-list-icon add">
          </div>
        </li>
        <!--  -->
        <li class="function-btn-list index-list" @click="measureBtn">
          <div class="function-btn-list-icon measure">
          </div>
        </li>
        <!--  -->
        <li class="function-btn-list index-list" @click="plotingBtn">
          <div class="function-btn-list-icon refresh">
          </div>
        </li>
      </ul>
    </div>

css

.function-btn-list-icon {
  margin: 10px;
  width: 46px;
  height: 80px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.function-btn-list-icon.reset:active {
  background-image: url("../../src/assets/index/reset_on.png");
}

.function-btn-list-icon.refresh {
  background-image: url("../../src/assets/index/plot.png");
}

.function-btn-list-icon.refresh:active {
  background-image: url("../../src/assets/index/plot_on.png");
}

.function-btn-list-icon.measure {
  background-image: url("../../src/assets/index/measurement.png");
}

.function-btn-list-icon.measure.active {
  background-image: url("../../src/assets/index/measurement_on.png");
}

.function-btn-list-icon.plotted {
  background-image: url("../../src/assets/index/layer.png");
}

.function-btn-list-icon.plotted.active {
  background-image: url("../../src/assets/index/layer_on.png");
}

.function-btn-list-icon.flight {
  background-image: url("../../src/assets/index/query.png");
}

.function-btn-list-icon.flight.active {
  background-image: url("../../src/assets/index/query_on.png");
}

.function-btn-list-icon.add {
  background-image: url("../../src/assets/index/add.png");
}

.function-btn-list-icon.add.active {
  background-image: url("../../src/assets/index/add_on.png");
}

.function-btn-list-icon.reserve {
  background-image: url("../../src/assets/index/reserve.png");
}

      // 
      $(".function-btn-list-icon.flight").click(function () {
        $(this).toggleClass("active");
          if ($(".function-btn-list-icon.flight").hasClass("active")) {
            $("-sharpsearch_show").show();
          } else {
            $("-sharpsearch_show").hide();
          }
      })

this can only control a single icon

Jquery

Mar.21,2021