take_attend.html

<html>
   <head>
      <title>Attendance Tracker</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <link rel="stylesheet" type="text/css" href="css/take_attend.css">
   </head>
   <body>
      <div id="roll-list-container">
         <div id="R1" class="roll-list-item-container">
            <div class="classId">1)</div> 
            <div class="roll-list-inner-container">
               <div class="name">Devika S</div> 
               <div class="roll_no">B150243CS</div> 
            </div>
            <input class="check-button" type="checkbox">
         </div>
          
         <div id="R1" class="roll-list-item-container">
            <div class="classId">1)</div> 
            <div class="roll-list-inner-container">
               <div class="name">Devika S</div> 
               <div class="roll_no">B150243CS</div> 
            </div>
            <input class="check-button" type="checkbox">
         </div>
          
      </div>
      <button id="confirm" class="blue-button">Submit</button>
   </body>
</html>