avoid multiple clicks by unbinding the click event

edx_proctoring/templates/proctoring/seq_proctored_exam_entrance.html

@@ -25,7 +25,7 @@
       {% endblocktrans %}
     </p>
 
-    <i class="fa fa-arrow-circle-right start-timed-exam" data-ajax-url="{{enter_exam_endpoint}}" data-exam-id="{{exam_id}}" data-attempt-proctored=true data-start-immediately=false></i>
+    <i class="fa fa-arrow-circle-right"></i>
   </button>
   <button class="gated-sequence start-timed-exam" data-ajax-url="{{enter_exam_endpoint}}" data-exam-id="{{exam_id}}" data-attempt-proctored=false data-start-immediately=true>
     <span><i class="fa fa-unlock"></i></span>
@@ -44,12 +44,22 @@
 {% include 'proctoring/seq_proctored_exam_footer.html' %}
 
 <script type="text/javascript">
-  $('.start-timed-exam').click(
+
+  var selector = $('.start-timed-exam');
+
+  selector.click(
     function(event) {
-      var action_url = $(this).data('ajax-url');
-      var exam_id = $(this).data('exam-id');
-      var attempt_proctored = $(this).data('attempt-proctored');
-      var start_immediately = $(this).data('start-immediately');
+
+      var action_url = selector.data('ajax-url');
+      var exam_id = selector.data('exam-id');
+      var attempt_proctored = selector.data('attempt-proctored');
+      var start_immediately = selector.data('start-immediately');
+
+      // unbind the click event to prevent the multiple calls
+      selector.unbind('click');
+
+      // adding class for moving cursor and to change the color of button
+      selector.parent().addClass('disable-proctored-exam-btn');
 
       if (!attempt_proctored) {
         var msg = gettext(
@@ -72,6 +82,11 @@
           "start_clock": start_immediately
         },
         function(data) {
+
+          // remove the class and bind the click event
+          selector.parent().removeClass('disable-proctored-exam-btn');
+          selector.bind('click');
+
           // reload the page, because we've unlocked it
           location.reload();
         }