document.addEventListener('DOMContentLoaded', function() {
  var video = document.getElementById('videoPlayer');
  var playPauseBtn = document.getElementById('playPauseBtn');
  var muteUnmuteBtn = document.getElementById('muteUnmuteBtn');
  var subtitleBtn = document.getElementById('subtitleBtn');
  var restartBtn = document.getElementById('restartBtn');
  var languageSelect = document.getElementById('languageSelect');
  var fullscreenBtn = document.getElementById('fullscreenBtn');
  var videoContainer = document.getElementById('videoContainer');
  let selectedLanguage = 'default';
  var subtitlesEnabled = false;
  const videoDirectory = {
    default: {
      videoName:'./assets/videos/Daikins Commitment English.mp4',
      subtitlesEncoded:'WEBVTT%0A%0A00%3A00%3A02.000%20--%3E%2000%3A00%3A06.404%0AToday%',
      srclang:'en'
    },
    japanese: {
      videoName:'./assets/videos/Daikins Commitment Japanese.mp4',
      subtitlesEncoded:'WEBVTT%0A%0A00%3A00%3A00.971%20--%3E%2000%3A00%3A05.844%081%E8%A6%8B%E9%81%8E%E3%81%94%E3%81%97%E3%82%84%E3%81%99%E3%81%84%E3%81%A7%E3%81%99%E3%81%8C%E3%80%81%0A%E9%81%A9%E5%88%87%E3%81%AA%E6%89%8B%E6%AE%B5%E3%82%92%E6%B4%BB%E7%94%A8%E3%81%99%E3%82%8C%E3%81%B0%E5%A4%A7%E4%B8%88%E5%A4%AB%E3%81%A7%E3%81%99%E3%80%82',
      srclang:'ja'
    },
    spanish: {
      videoName:'./assets/videos/Daikins Commitment Spanish.mp4',
      subtitlesEncoded:'WEBVTT%0A%0A00%3A00%3A02.000%20--',
      srclang:'es'
    },
    french: {
      videoName:'./assets/videos/Daikins Commitment French.mp4',
      subtitlesEncoded:'WEBVTT%0A%0A00%3A00%3A02.',
      srclang:'fr'
    },
  };

  video.muted = false;
  selectedLanguage = languageSelect.value; // Set initial language based on select value
  updateSubtitles();

  video.play().catch(function(err) {
      console.log('Autoplay was prevented:', err);
  });

  // Play/Pause Button
  playPauseBtn.addEventListener('click', function() {
      playPauseBtn.src = video.paused ? "./assets/icons/pause.png" : "./assets/icons/play.png";
      if (video.paused) {
          video.play();
      } else {
          video.pause();
      }
  });

  // Mute/Unmute Button
  muteUnmuteBtn.addEventListener('click', function() {
      video.muted = !video.muted;
      muteUnmuteBtn.src = video.muted ? "./assets/icons/mute.png" : "./assets/icons/unmute.png";
  });

  // Restart Video
  restartBtn.addEventListener('click', function() {
      video.currentTime = 0;
      video.play();
  });

  // Subtitle Button
  subtitleBtn.addEventListener('click', function() {
      subtitlesEnabled = !subtitlesEnabled;
      updateSubtitleButtonIcon(); // Optional: Update the button icon or text
      // Toggle subtitles
      var tracks = video.textTracks;
      for (var i = 0; i < tracks.length; i++) {
          tracks[i].mode = subtitlesEnabled ? 'showing' : 'hidden';
      }
  });

  // Language Selection
  languageSelect.addEventListener('change', function() {
      selectedLanguage = languageSelect.value;
      console.log("Selected Language is", selectedLanguage);
      video.src = videoDirectory[selectedLanguage].videoName;
      updateSubtitles();
      video.load();
      video.play();
  });

  // Update Subtitles Function
  function updateSubtitles() {
      // Remove existing tracks
      var existingTracks = video.querySelectorAll('track');
      existingTracks.forEach(function(track) {
          if (track.src) {
              URL.revokeObjectURL(track.src);
          }
          track.remove();
      });

      // Create a new track element
      let newTrack = document.createElement('track');
      newTrack.kind = 'subtitles';
      newTrack.src = `data:text/vtt;charset=utf-8,${videoDirectory[selectedLanguage].subtitlesEncoded}`;
      newTrack.label = selectedLanguage;
      newTrack.srclang = videoDirectory[selectedLanguage].srclang;

      // Add the track to the video
      video.appendChild(newTrack);

      // Set the track's mode based on whether subtitles are enabled
      newTrack.track.mode = subtitlesEnabled ? 'showing' : 'hidden';
  }

  // Update Subtitle Button Icon (Optional)
  function updateSubtitleButtonIcon() {
      // Change the icon or text based on subtitlesEnabled
      subtitleBtn.src = subtitlesEnabled ? "./assets/icons/subtitle_on.png" : "./assets/icons/subtitle_off.png";
  }

  // Fullscreen functionality
  fullscreenBtn.addEventListener('click', function() {
      if (!document.fullscreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
          enterFullscreen(videoContainer);
      } else {
          exitFullscreen();
      }
  });

  // Enter fullscreen
  function enterFullscreen(element) {
      if (element.requestFullscreen) {
          element.requestFullscreen();
      } else if (element.webkitRequestFullscreen) { /* Safari */
          element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) { /* IE11 */
          element.msRequestFullscreen();
      }
      fullscreenBtn.textContent = 'Exit Fullscreen';
  }

  // Exit fullscreen
  function exitFullscreen() {
      if (document.exitFullscreen) {
          document.exitFullscreen();
      } else if (document.webkitExitFullscreen) { /* Safari */
          document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) { /* IE11 */
          document.msExitFullscreen();
      }
      fullscreenBtn.textContent = 'Fullscreen';
  }

  // Update fullscreen button text on fullscreen change
  function onFullscreenChange() {
      if (!document.fullscreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {
          fullscreenBtn.textContent = 'Fullscreen';
      } else {
          fullscreenBtn.textContent = 'Exit Fullscreen';
      }
  }

  // Add event listeners for fullscreen change
  document.addEventListener('fullscreenchange', onFullscreenChange);
  document.addEventListener('webkitfullscreenchange', onFullscreenChange);
  document.addEventListener('msfullscreenchange', onFullscreenChange);

}); this is my js code and this <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Climate Change</title>
<link rel="stylesheet" href="style.css">

</head>
<body>
  <!-- Video Container -->
  <div id="videoContainer">
    <!-- Video Player -->
    <video id="videoPlayer" loop playsinline webkit-playsinline>
      <source src="assets/videos/Daikins Commitment English.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
    <div id="controls">
      <img src="assets/icons/pause.png" id="playPauseBtn" alt="playpause">
      <img src="assets/icons/unmute.png" id="muteUnmuteBtn" alt="muteunmute">
      <img src="assets/icons/restart.png" id="restartBtn" alt="restart">
      <img src="assets/icons/subtitle.png" id="subtitleBtn" alt="subtitle">
      <select id="languageSelect">
        <option value="default"> 🇬🇧 English</option>
        <option value="japanese"> 🇯🇵 Japanese</option>
        <option value="spanish"> 🇪🇸 Spanish</option>
        <option value="french"> 🇫🇷 French</option>
      </select>
      <button id="fullscreenBtn">Fullscreen</button>
    </div>
  </div>
<script src="script.js"></script>
</body>
</html> is my html code initially everything works well but if the subtitle is showing and the language of the video is changed then it appends the new subtitle track on top of the old subtitle track I want to completely remove the old subtitle track