Here is my code,

<section class="page-section portfolio" id="portfolio">
<div class="container">
    <center>
        <h4 id="randomText"></h4>
        <input type="text" class="form-control mb-2" placeholder="Enter Text " 
 id="enter_text"
               required autofocus>
        <button id='verify_id' class="btn btn-primary btn-lg">Verify</button>
        <br><br>
        <p id="text_showing"></p>

    </center>
</div>

</section>
<script>
const characters ='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';

function generateString() {
var length = 8;
let result = ' ';
const charactersLength = characters.length;
for ( let i = 0; i < length; i++ ) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
}

return result;

}

function show_text(){
     document.getElementById('randomText').innerHTML=generateString();
}
show_text() 
 </script>
 <script defer>
 $(document).ready(function(){
   $("#verify_id").click(function(){
   var text=$('#enter_text').val();
   var text1=$('#randomText').text();
     if (text == text1){
     $('#text_showing').text("You have successfully verified the text").css({ 
      'color': 'green', 'font-size': '150%' });
     }
     else{
            $('#text_showing').text("Given text and Input text not matching ").css({ 
    'color': 'red', 'font-size': '150%' });

    }
    });



   });


   </script>

Now the problem after entering right text in input field I am getting the error msg "Given text and Input text not matching",I am unable to figure out the problem,can anyone please help me to sort out the problem?