Как перезапустить видео по клику без ссылки на идентификатор элемента

Question

Из многих других предыдущих ответов я знаю, что вы можете перезапустить видео, используя document.getElementById() и затем вызывая load().Есть ли способ сбросить видео без выделения идентификатора?

Я пытался использовать document.getElementsByClass('.highlight-video')).load();, но функция не будет работать как ожидалось.В настоящее время я вручную нумерую каждое видео с идентификатором, который затем вызывается, и я знаю, что это действительно плохой способ сделать это, и искал лучшее решение вокруг него.

это 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>