i want to count the number of correct answers in jS or jquery

I want to count the number of correct answers and display it.i tried many ways but couldn't go through.will appreciate if anybody can help me .Thanks in advance.

{% extends 'base.html' %} 
{% block title%}Quiz{% endblock title %} 
{% block content %}
  <div class=" text-danger mt-5 text-center">
    <!-- <h2><b id="count">Timer</b></h2> -->
    <h3>+++Quiz on Indian Politics+++</h3>
    <hr>
  </div>
  <div class="pt-5">
    {% for item in obj %}
      <table>
        <tr>
          <h2>Q{{item.id}}. {{item.question}}</h2><br>
        </tr>
        <tr>
          <input type="radio" class="rd" name="{{item.id}}" id="opt1" value="{{item.opt1}}">&nbsp;{{item.opt1}}</input><br>
        </tr>
        <tr>
          <input type="radio" class="rd" name="{{item.id}}" id="opt2" value="{{item.op2}}">&nbsp;{{item.opt2}}</input><br>
        </tr>
        <tr>
          <input type="radio" class="rd" name="{{item.id}}" id="opt3" value="{{item.opt3}}">&nbsp;{{item.opt3}}</input><br>
        </tr>
        <tr>
          <input type="radio" class="rd" name="{{item.id}}" id="opt4" value="{{item.opt4}}">&nbsp;{{item.opt4}}</input><br>
        </tr>
        <tr>
          <label id="lb" class="rd" name="{{item.id}}" value="{{item.cor_ans}}" style='display:none;color:green'><b>The correct answer is: {{item.cor_ans}}</b></label>
        </tr>
        <tr>
        </tr>
      </table>
      <hr> {% endfor %}
      <div class="pt-4">
        <button type="submit" class="btn btn-success" id="btn">Submit</button>
      </div>
      <div class="pt-3">
        <b id="counter"></b>
        <b id="ans"></b>
      </div>
    </div>
{% endblock content %} 
{% block scripts %}
  <script>
    const rad = document.getElementsByClassName('rd')
    const input = document.getElementsByTagName('input')
    const bt = document.getElementById('btn')
    const label = document.getElementsByTagName('label')
    const counter = document.getElementById('counter')
    var score = 0;

    bt.onclick = function() {}

    // JQuery code
    $(document).ready(function() {
      $('#btn').click(function() {
        $('.rd').show();
        $('.rd').attr("disabled", true);
      });
    });

    // # javascript code
    bt.addEventListener('click', function() {
      for (i = 0; i < input.length; i++) {
        if (input[i].type === 'radio') {
          if (input[i].checked) {
            document.getElementById('ans').innerHTML += "Q" + input[i].name + "  The Answer you selected is:  " + input[i].value + "<br>";
          }
        }
      }
    })
    
    // var interval = setInterval(function(){
    //   document.getElementById('count').innerHTML=count;
    //   count--;
    //   if (count === 0){
    //     clearInterval(interval);
    //     document.getElementById('count').innerHTML='Done';
    //     alert("You're out of time!");
    //   }
    // }, 1000);
    // document.getElementsByClassName('counter').innerHTML = cnt;
    // console.log(label[j].innerHTML.replace("<b>The correct answer is: ","").replace("</b>",""))
    //
    //   if(label[j].innerHTML.replace("<b>The correct answer is: ","").replace("</b>","") == input[i].value){
    //     console.log("Hello")
    //   }
  </script>
{% endblock scripts %}