DOM Manipulation Loop Authentication (Vanilla JS Only!)

JavaScript
1

Please Help!

Problems to Solve:

  1. Each users has their number of submitted Homework as shown below in hw object property.
  2. For example, a user1 submitter Homework #5 then he would have a access in the video #1 up to #7. Similar with the user2 submitted Homework #7 then he would have a access in the video #1 upto #9.
  3. In the HTML page, for user1 the video #1 up to video #7 are shown/display and video #8 up to video #10 are hidden. Similarly for user2 video #1 up to video #9 are also shown/display and video #10 is hidden. This will continue loop if I add more videos and the access will be based on the users submitted hw as mentioned above.

I hope everything is clear, thanks in advanced for the support and answer!
Newbie User,

JS

function User(email, pass, hw) {
  this.email = email;
  this.pass = pass;
  this.hw = hw;
}

// Individual Users
let user1 = new User('user1@email.com', '123', 5);
let user2 = new User('user2@email.com', '246', 7);

// User Groups
let users = [user1, user2];

HTML:

<div class="container">
          <div class="lesson lesson-1">
                   <video src="sample-1.mp4" ></video>
         </div>
         <div class="lesson lesson-2">
                   <video src="sample-2.mp4" ></video>
         </div>
         <div class="lesson lesson-3">
                   <video src="sample-3.mp4" ></video>
         </div>
         <div class="lesson lesson-4">
                   <video src="sample-4.mp4" ></video>
         </div>
         <div class="lesson lesson-5">
                   <video src="sample-5.mp4" ></video>
         </div>
         <div class="lesson lesson-6">
                   <video src="sample-6.mp4" ></video>
         </div>
         <div class="lesson lesson-7">
                   <video src="sample-7.mp4" ></video>
         </div>
         <div class="lesson lesson-8">
                   <video src="sample-8.mp4" ></video>
         </div>
         <div class="lesson lesson-9">
                   <video src="sample-9.mp4" ></video>
         </div>
         <div class="lesson lesson-10">
                   <video src="sample-10.mp4" ></video>
         </div>
</div>

CSS:

.hide {
display: none;
}
.show {
display: block;
}