How to call a function on button click that have the same variable? [Solved]

In HTML I created 4 buttons. One to make the video speed slower (x0.5), another one to make it at its normal speed (x1.0), another one to make its speed faster (x2.0), and the last one to make its speed very fast (x8.0). I made the buttons correctly and everything worked as how it should work, but the problem is when I try to apply these buttons to another video the buttons will work only on the second video without doing anything to the first video. And when I delete the second video, the buttons will back to work normally on the first video. I checked the console and I found no errors.

My HTML code

                <h3>First video</h3>
                <video id="vfirst" controls src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" height="339" width="600"></video>
                <p>Video speed</p>
                <div class="sps">
                    <button class="bs" onclick="Bs()" type="button">×0.5</button>
                    <button class="bn" onclick="Bn()" type="button">×1.0</button>
                    <button class="bf" onclick="Bf()" type="button">×2.0</button>
                    <button class="bvf" onclick="Bvf()" type="button">×8.0</button>
                </div>
                <h3>Second video</h3>
                <video id="vsec" controls src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" height="339" width="600"></video>
                <p>Video speed</p>
                <div class="sps">
                    <button class="bs" onclick="Bs2()" type="button">×0.5</button>
                    <button class="bn" onclick="Bn2()" type="button">×1.0</button>
                    <button class="bf" onclick="Bf2()" type="button">×2.0</button>
                    <button class="bvf" onclick="Bvf2()" type="button">×8.0</button>
                </div>
                
                            <script>
                var vid = document.getElementById("vfirst");
                    function Bs() {
                        vid.playbackRate = 0.5;
                    }
                    function Bn() {
                        vid.playbackRate = 1;
                    }
                    function Bf() {
                        vid.playbackRate = 2;
                    }
                    function Bvf() {
                        vid.playbackRate = 8;
                    }
                var vid = document.getElementById("vsec");
                    function Bs2() {
                        vid.playbackRate = 0.5;
                    }
                    function Bn2() {
                        vid.playbackRate = 1;
                    }
                    function Bf2() {
                        vid.playbackRate = 2;
                    }
                    function Bvf2() {
                        vid.playbackRate = 8;
                    }
            </script>

Here is the same code, but the second video is deleted. Look how it works very fine.

                    <h3>First video</h3>
                    <video id="vfirst" controls src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" height="339" width="600"></video>
                    <p>Video speed</p>
                    <div class="sps">
                        <button class="bs" onclick="Bs()" type="button">×0.5</button>
                        <button class="bn" onclick="Bn()" type="button">×1.0</button>
                        <button class="bf" onclick="Bf()" type="button">×2.0</button>
                        <button class="bvf" onclick="Bvf()" type="button">×8.0</button>
                    </div>
                    
                                <script>
                    var vid = document.getElementById("vfirst");
                        function Bs() {
                            vid.playbackRate = 0.5;
                        }
                        function Bn() {
                            vid.playbackRate = 1;
                        }
                        function Bf() {
                            vid.playbackRate = 2;
                        }
                        function Bvf() {
                            vid.playbackRate = 8;
                        }
                </script>

Any ideas?

Answer

You need to change the variable name vid to vid1 for the first video and vid2 for the second video. use the below code in tag.

var vid1 = document.getElementById("vfirst");
function Bs() {
    vid1.playbackRate = 0.5;
}
function Bn() {
    vid1.playbackRate = 1;
}
function Bf() {
    vid1.playbackRate = 2;
}
function Bvf() {
    vid1.playbackRate = 8;
}
var vid2 = document.getElementById("vsec");
function Bs2() {
    vid2.playbackRate = 0.5;
}
function Bn2() {
    vid2.playbackRate = 1;
}
function Bf2() {
    vid2.playbackRate = 2;
}
function Bvf2() {
    vid2.playbackRate = 8;
}