<hr>
<div class="row mb-3 p-2 bg-light">
    <div class="col-6 col-sm-3 col-md-3 col-lg-3">
        <select class="form-control">
            <option selected disabled>Choose Subject</option>
            <option>Biology</option>
            
        </select>
    </div>
    <div class="col-6 col-sm-2 col-md-2 col-lg-2">
        <select class="form-control">
            <option selected disabled>Term</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
    </div>
    <div class="col-6 col-sm-2 col-md-2 col-lg-2">
        <button class="btn btn-primary" onclick="get_deregister_students_from_subject()">
            Add Subject
        </button>
    </div>
</div>
<div>
    <p>Term 1 Subjects</p>

    <div class="p-2">
        <table class="table" id="subjects_table">
            <thead>
                <tr>
                    <th>Subject Name</th>
                    <th>Cont. Assessment</th>
                    <th>End Sem Grade</th>
                    <th>TotalGrade</th>
                    <th>Points/Letter Grade</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Biology</td>
                    <td>30</td>
                    <td>0</td>
                    <td></td>
                    <td></td>
                    <td>
                        <button class="btn btn-danger" onclick="">
                            Delete
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<script>  
 $(document).ready(function(){  
    if(document.getElementById("subjects_table")!==null){
      $('#subjects_table').DataTable({
        
      });
    }
 });  
 </script>