<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body align="center"><br/><br/><br/>
  <h1> OTP VERIFICATION </h1> <br/><br/> ENTER NUMBER <input type="text" id="value1"><br/></br>
<button> GENERATE OTP </button> <br/><br/>
ENTER OTP <input type="text" id="value2"> <br/></br>
<button> VERIFY OTP</button> <br/><br/>
  <div id="records"> </div>
</body>

</html>
$(function() {
  $('button').on('click', function() {
    var val1 = document.getElementById('value1').value;
    var val2 = document.getElementById('value2').value;
    var $records = $('#records');

    var composedUrl = "https://api.msg91.com/api/v5/otp?template_id=60d5dd06e16a2b67bc3892f3&mobile=91" +val1 + "&"; 

//API FOR OTP VERIFICATION
var composedUrl2 = "https://api.msg91.com/api/v5/otp/verify?authkey=2&mobile=91" + val1 + "&otp=" + val2; 

    console.log(composedUrl);

    $.ajax({
      type: 'GET',
      url: composedUrl,
      success: function(data) {

        var rate1 = data.rates[val1];
        var rate2 = data.rates[val2];

        console.log(rate1);
        var final = rate1 / rate2;
        $('#records').html('OTP VERIFIED :  ' + final);
      }
    });
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.