Why is my jquery only applying to the 1st if statement only and ignoring the rest?

I have this script code:

$(document).ready(function() {
                if ($("div[data-content='content-1']").hasClass("slide--current")) {
                    $("body").addClass("mobile-app");
                    $("body").removeClass("web-app");
                    $("body").removeClass("design-app");
                }
                if ($("div[data-content='content-2']").hasClass("slide--current")) {
                    $("body").addClass("web-app");
                    $("body").removeClass("mobile-app");
                    $("body").removeClass("design-app");
                }
                if ($("div[data-content='content-3']").hasClass("slide--current")) {
                    $("body").removeClass("web-app");
                    $("body").removeClass("mobile-app");
                    $("body").addClass("design-app");
                }
            });
        </script>

But for some reason the query only runs the first script code and doesnt follow up if the slide-current is applied to a different data-content, I have tried adding an else if to each but that didnt fix anything. Also when data-content 2 and 3 have class "slide–current` nothing applies from my script for some reason…

Am I approaching this the wrong way?

>Solution :

Here is a slideshow based on what I can deduct from your code

$(function() {
  // Slideshow
  const $contents = $("div[data-content^='content']"); // starts with content
  const appClasses = ["mobile-app", "web-app", "design-app"]; // your three other classes
  const len = appClasses.length; // how many?
  let cnt = 0;
  let tId = setInterval(() => {
      appClasses.forEach((cls, i) => { // run over the list of types of content
        $contents.eq(i)[i === cnt ? "addClass" : "removeClass"]("slide--current"); // if the counter matches the index of the class, add else remove
        $("body")[i === cnt ? "addClass" : "removeClass"](cls)
      });
      cnt++;
      if (cnt >= len) cnt = 0; // wrap
    },
    2000)
});

.mobile-app {
  background-color: green;
}

.web-app {
  background-color: yellow;
}

.design-app {
  background-color: red;
}

.slide--current {
  border: 1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div data-content="content-1">One</div>
<div data-content="content-2">Two</div>
<div data-content="content-3">Three</div>