indirectly changing the play button style using JavaScript event

I am building a music player using HTML-css-javascript only. I have a list of music which I have stored in an array as shown below.

let songs = [
   {songName: "Butter", filePath:"songs/1.mp3",coverPath:'covers/1.png'},
   {songName: "Boy With Luv", filePath:"songs/2.mp3",coverPath:'covers/2.jpeg'},
   {songName: "Dynamite", filePath:"songs/3.mp3",coverPath:'covers/3.jpeg'},
   {songName: "Idol", filePath:"songs/4.mp3",coverPath:'covers/4.png'},
   {songName: "Life Goes On", filePath:"songs/5.mp3",coverPath:'covers/5.jpeg'},
   {songName: "Mic Drop", filePath:"songs/6.mp3",coverPath:'covers/6.jpeg'},
]

And the UI looks like this:

ignore the bad UI

Things look good that on clicking specific songs, the play icon on the side of the song name changes, but when I change the song with the next button at the bottom, the song changes but the icon still remains unchanged. As you can see in the second image, I changed to the fourth song but the music list still shows the third song playing.

enter image description here

I need to change the styling of the icon with the click of the next&previous button at the bottom. I have songindex of the current song playing in the function.

for reference attached the nextButton code:

//next button
document.getElementById('next').addEventListener('click', (e)=>{
 
 songIndex = (songIndex >=5) ? 0 : songIndex+1;
 audioElement.src = `songs/${songIndex}.mp3`;
 audioElement.currentTime = 0;
 audioElement.play();
 masterPlay.classList.remove('fa-play-circle');
 masterPlay.classList.add('fa-pause-circle');
 mastersongName.innerText = "BTS - "+songs[songIndex].songName;
 masterSideImg.src = songs[songIndex].coverPath;

})

COmplete HTML code:

    <!DOCTYPE HTML>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Redify - listen music here</title>
    <link rel="stylesheet" href="style.css">
 </head>
<body>
   <nav>
       <ul>
           <li class="brand"><img src="logo.png" alt="logo">Spotify</li>
           <li>Home</li>
           <li>About</li>
       </ul>
   </nav>

<div class="container">
    <div class="songList">
        <h1>Best of BTS</h1>
        <div class="songitemContainer">
            <div class="songItem">
                <img alt="1">
                <span class="songName">Butter</span>
                <span class="songlistPlay">
                    <span class="timestamp">3:41
                        <i id="0" class="far songItemPlay fa-1.5x fa-play-circle"></i>
                    </span> 
                </span>
            </div>
            <div class="songItem">
                <img alt="1">
                <span class="songName">Butter</span>
                <span class="songlistPlay">
                    <span class="timestamp">3:41
                        <i id="1" class="far songItemPlay fa-1.5x fa-play-circle"></i>
                    </span> 
                </span>
            </div>
            <div class="songItem">
                <img alt="1">
                <span class="songName">Butter</span>
                <span class="songlistPlay">
                    <span class="timestamp">3:41
                        <i id="2" class="far songItemPlay fa-1.5x fa-play-circle"></i>
                    </span> 
                </span>
            </div>
            <div class="songItem">
                <img alt="1">
                <span class="songName">Butter</span>
                <span class="songlistPlay">
                    <span class="timestamp">3:41
                        <i id="3" class="far songItemPlay fa-1.5x fa-play-circle"></i>
                    </span> 
                </span>
            </div>
            <div class="songItem">
                <img alt="1">
                <span class="songName">Butter</span>
                <span class="songlistPlay">
                    <span class="timestamp">3:41
                        <i id="4" class="far songItemPlay fa-1.5x fa-play-circle"></i>
                    </span> 
                </span>
            </div>
            <div class="songItem">
                <img alt="1">
                <span class="songName">Butter</span>
                <span class="songlistPlay">
                    <span class="timestamp">3:41
                        <i id="5" class="far songItemPlay fa-1.5x fa-play-circle"></i>
                    </span> 
                </span>
            </div>
        </div>
    </div>

    <div class="songBanner">
      
    </div>
</div>


<div class="bottom">
    <img src="covers/1.png" alt="side_img" width="60px" id="masterSideImg">
    <div class="bottomprogress">
        <input type="range" name="range" id="myProgressBar" min="0" max="100" value=0>
        <div class="icons">
            <i class="fas fa-2x fa-step-backward" id="previous"></i>
            <i class="far fa-2x fa-play-circle" id="masterPlay"></i>
            <i class="fas fa-2x fa-step-forward" id="next"></i>
        </div>
        <div class="songInfo">
            <img src="playing.gif" width="32px" alt="playing" id="gif"><span id="mastersongName">BTS - Butter</span> 
        </div>
    </div>
</div>
<script src="https://kit.fontawesome.com/06646b7200.js" crossorigin="anonymous"></script>
<script src="script.js"></script>

The complete link of the project is given here: https://github.com/mohitm15/Redify

Answer

Looks to me like you forgot to call makeAllPlay(); at the beginning of the previous/next button click handlers. Also you’ll want to change the newly playing song item to show the pause button.

Near the beginning of the two click handlers (for previous/next buttons) add:

makeAllPlay();
const itemElem = document.getElementsByClassName("songItemPlay")[songIndex];
itemElem.classList.remove('fa-play-circle');
itemElem.classList.add('fa-pause-circle');