Apply a css-value with jQuery but check if it is specified already

I am using jQuery to apply background-images to randomly selected DIV elements.

I have put together a working piece of code with the help of others while searching for a solution, but I am running into the following problem:

• It randomly chooses which DIV should change the background-image (great) but it does not check if any of the DIVs is already using this exact image in that moment.

I want to make sure that no two DIV elements can have the same background-image at any given time.

Here is my code:

var urls = [
        'url(https://placekitten.com/g/350/150)',
        'url(https://placekitten.com/g/300/550)',
        'url(https://placekitten.com/g/400/200)',
        'url(https://placekitten.com/g/350/750)',
        'url(https://placekitten.com/g/250/600)',
        'url(https://placekitten.com/g/400/150)',
        'url(https://placekitten.com/g/300/600)',
        'url(https://placekitten.com/g/450/350)'
          ];
          // Select the next image
          var active = Math.floor(Math.random() * (urls.length - 4)) + 1

          setInterval(function() {

                // Select randomnly the next div to change
                var rand = Math.floor(Math.random() * 4);
                
                // Store this list, so that we only make one call to the page
                let images = $('.image');
                
                let datachanged = images.attr("data-changed");
                
                // This conditions work, but their is a better way of doing it. See comment below the snippet
                while(rand == datachanged)
                rand = Math.floor(Math.random() * 4);
          
                let current = $('.image:nth-child('+(rand+1)+')');
                
                current.toggleClass("show hide");
                
                // The fade effect takes 400ms
                // So we use a setTimeout to change the bg in 400ms and not immediatly
                // Once the background is changed, the "visible" class we be added
                setTimeout(function(){
                
                  current.css('background-image', urls[active]);
                  
                  images[0].setAttribute("data-changed", rand);
                
                  current.toggleClass("hide show");
                
                },400);
          
                // Change active value so that the background will not be same next time
                active++;
                
                active = (active == urls.length) ? 0 : active ;
                
          }, 2000);

body { margin: 0; font-size: 0;}

.image {
  background-size: cover;
  display: inline-block;
  width: 23%;
  padding-top: 23%;
  margin: 1%;
  transition: opacity 0.4s ease;
}

.image:nth-of-type(1) { 
  background-image: url(https://placekitten.com/g/350/150); 
}
.image:nth-of-type(2) { 
  background-image: url(https://placekitten.com/g/300/550); 
}
.image:nth-of-type(3) { 
  background-image: url(https://placekitten.com/g/400/200); 
}
.image:nth-of-type(4) { 
  background-image: url(https://placekitten.com/g/350/750); 
}

.show {
      opacity: 1;
}

.hide {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="images">
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
  <div class="image"></div>
</div>

And here is the same code on jsFiddle.