如何在点击时重新启动视频，而不必引用元素ID

Question

从先前的许多其他答案中我们知道，您可以通过使用document.getElementById()然后调用load()来重新启动视频。是否可以在不分配ID的情况下重置视频？

我尝试使用document.getElementsByClass('.highlight-video')).load();，但该功能无法正常使用。目前，我已经为每个视频手动编号了一个ID，然后将其称为ID，我知道这样做是非常糟糕的方法，并且正在寻找更好的解决方案。

这是JavaScript

$('.highlight-toggle').click(function(){
    $('.highlight-img-container').removeClass("show");
    $('#highlight-container'+$(this).attr('target')).addClass("show");
    document.getElementById('video'+$(this).attr('target')).load();
    document.getElementById('video'+($(this).attr('target')*2)).load();
    document.getElementById('video'+($(this).attr('target')*3)).load();
});

和代码本身

<div class="col-8 m-auto">
    <div class="ml-auto position-relative highlight-img-container show" id="highlight-container1">
        <div class="video-border">
            <video autoplay muted class="highlight-video img-fluid lazy" id="video1" src="{{asset('img/salesvid.mp4')}}" ></video>
        </div>
    </div>
    <div class="ml-auto position-relative highlight-img-container" id="highlight-container2">
        <div class="video-border case-management1 mx-auto">
            <video autoplay muted class="highlight-video img-fluid case-management1 lazy" id="video2" src="{{asset('img/casevid1.mp4')}}" ></video>
        </div>
        <div class="video-border case-management2 position-absolute">
            <video autoplay muted class="highlight-video img-fluid case-management2 lazy" id="video4" src="{{asset('img/casevid-2.mp4')}}" ></video>
        </div>
    </div>
</div>
<!--Highlight Toggle-->
<div class="col-4 accordion d-flex flex-column justify-content-between" id="highlight-tab">
    <div class="highlight-toggle-container highlight-sales-border bg-white">
        <div class="highlight-toggle active" target="1" id="sales">
            <div data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne2">
                <h3>SALES</h3>
            </div>
        </div>
        <div id="collapseOne" class="collapse" aria-labelledby="sales" data-parent="#highlight-tab">
            <p>
                Lorem ipsum
            </p>
        </div>
    </div>
    <div class="highlight-toggle-container highlight-case-border bg-white">
        <div class="highlight-toggle" target="2" id="case">
            <div data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo2">
                <h3>CASE</h3>
            </div>
        </div>
        <div id="collapseTwo" class="collapse" aria-labelledby="case" data-parent="#highlight-tab">
            <p>
                Lorem ipsum
            </p>
        </div>
    </div>
</div>