Multiple Video Player Instances, some buttons do not work

[xSignificant]

I am having an issue where I have multiple video player instances of Videojs, and aside from the first player instance, every player instance afterwards(e.g source-player-2); The playback rate and caption button do not work.

I thought it was an issue with the player #id being the same, but as you can see below with the HTML code, each player instance has their unique ID.

Any insight of this issue would be appreciated.

PHP code to generate player instances

if($options['videojs_prate']  == 'on') { 
$videojs = <<<_end_
<video id="{$id}" class="video-js vjs-default-skin vjs-big-play-centered" width="{$width}" height="{$height}"  preload="auto" poster="{$poster}"{$autoplay_attribute} {$controls_attribute} {$loop_attribute} {$muted_attribute} playsInline data-setup='{"playbackRates": [0.5, 1, 1.25, 1.5, 2, 4],"techOrder": ["chromecast", "html5", "flash"]}'>
{$mp4_6_source}
{$mp4_5_source}
{$mp4_4_source}
{$mp4_3_source}
{$mp4_2_source}
{$mp4_source}
{$mkv_6_source}
{$mkv_5_source}
{$mkv_4_source}
{$mkv_3_source}
{$mkv_2_source}
{$mkv_source}
{$hls_source}
{$mpeg_source}
{$cap_source}
{$cap_2_source}
{$cap_3_source}
{$cap_4_source}
{$cap_5_source}
{$cap_6_source}
{$gdrive_source}
{$mp3_source}
{$webm_source}
{$ogg_source}
</video>
{$hls_min}
{$youtube_source}
<script>
var player = videojs('#{$id}'); 
</script>

HTML code for the generated Player Instance

<video id="player_1125498774" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="264"  preload="auto" poster="" controls  playsInline data-setup='{"playbackRates": [0.5, 1, 1.25, 1.5, 2, 4],"techOrder": ["chromecast", "html5", "flash"]}'>
<source src="src_link" label="720p" type="video/mp4" />
<track kind="captions" src="cap_link" label="”English”">
</video>
        
        
<script>
var player = videojs('#player_1125498774'); 
</script>   


<div id='source-player-2' class='source-box'><div class='pframe'>                                                                                                           <div class='player_responsive'>
<video id="player_1454625181" class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="264"  preload="auto" poster="" controls  playsInline data-setup='{"playbackRates": [0.5, 1, 1.25, 1.5, 2, 4],"techOrder": ["chromecast", "html5", "flash"]}'>        
<track kind="captions" src="cap_link" label="”English”">
<source src="src_link" label="4K" type="video/webm" />      
</video>
        
        
<script>
var player = videojs('#player_1454625181'); 
</script>