Problem in setting background image in circle and square randomly

Document
<script> 
    function changebg() {
    const images = [
        'url(a.jpg)',
        'url(b.jpg)',
        'url(c.jpg)',
        'url(d.jpg)',
        'url(e.jpg)',
        'url(f.jpg)',
        'url(g.jpg)'
    ]

    const glowingcircles = document.getElementsByClassName('glowing-circles');
    const bg = images[Math.floor(Math.random() * images.length)];
    glowingcircles.style.backgroundImage = bg;
    }
    setInterval(changebg, 1000)
    
</script> 

CSS

body{
margin: 0;
padding: 0;
background: black;
}

.glowing-circles{
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
transform: translate(-100%, -100%);
box-sizing: border-box;
}

.glowing-circles::before{
content: ‘’;
position: absolute;
width: 10;
height: 10;
top: 50%;
left: 50%;
border: 2px solid blue;
box-sizing: border-box;
transform: translate(100%, 100%);
background-image: url(a.jpg);
background-size: cover;
animation: animate 2s linear infinite;
}

.glowing-circles::after{
content: ‘’;
position: absolute;
width: 0;
height: 0;
top: 50%;
left: 50%;
border: 2px solid blue;
border-radius: 50%;
box-sizing: border-box;
transform: translate(-50%, -50%);
background-image: url(b.jpg);
background-size: cover;
animation: animate 2s linear infinite;
animation-delay: 1s;
}

@keyframes animate{
0%{
width: 0;
height: 0;
opacity: 1;
border: 2px solid blue;
box-shadow: 0 0 10px blue;
}

70%{
    opacity: 1;
}

100%{
    width: 100%;
    height: 100%;
    opacity: 1;
    border: 2px solid blue;
    box-shadow: 0 0 100px blue;
}

}