JSFiddle - React, Tailwind, and code Playground

by fredd man

HTML

<!DOCTYPE html>
<html>
    <head>
        
         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
       <script src="https://apis.google.com/js/client.js?onload=onClientLoad" type="text/javascript"></script>
       <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
       <script src="search.js" type="text/javascript"></script>
 
       
    
       
    </head>
    <body>
        <p>Hola!</p>
     
      
      
      <div id="search">
      <input type="text"  value="eureka" id="searchtext"><button type="button" id="searchbutton">Find</button>
      </div>
        <button type="button">Search Me...</button>
        
        <pre id="response">
        </pre>
      <pre id="count"></pre>
        <pre class="vID"></pre>
        <div id="snipp">
          <div id="T0">
          
          </div>
          
        </div>
        <br/><br/><br/>
        
    </body>
</html>

JavaScript

var nextPageToken, prevPageToken;
var firstPage=true;
$(document).ready(function()
{
       
    $('#searchbutton').click(function()
    {
        // Called automatically when JavaScript client library is loaded.
      //  alert('i am clicked');
        gapi.client.load('youtube', 'v3', onYouTubeApiLoad);
 
        // Called automatically when YouTube API interface is loaded .
       
 
        // Called automatically with the response of the YouTube API request.
        
 
          // $('#search').append("<div id=\"page\"><button type=\"button\" id=\"nextPageButton\">Next Page</button></div>");
           //  $('#search').append("<div id=\"page\"><button type=\"button\" id=\"nextPageButton\">Next Page"+nextPageToken+"</button></div>");
 
        });
  $('#search').append("<div id=\"page\"><button type=\"button\" id=\"prevPageButton\">Prev Page "+prevPageToken+"</button></div>");
    $('#search').append("<div id=\"page\"><button type=\"button\" id=\"nextPageButton\">Next Page "+nextPageToken+"</button></div>");
    
     $('#nextPageButton').click(function()
    {
       // alert('i am clicked');
        console.log(nextPageToken);
        searchYouTubeApi(nextPageToken);
    });
    
     $('#prevPageButton').click(function()
    {
       // alert('i am clicked');
        console.log(prevPageToken);
        searchYouTubeApi(prevPageToken);
    });
 
});
 
 function onYouTubeApiLoad() 
        {
            // See http://goo.gl/PdPA1 to get a key for your own applications.
            gapi.client.setApiKey('AIzaSyDq4neVjjSiKlKizs2fl9hU-dDM3yB28iU');
            searchYouTubeApi();
 
        }
 
        function searchYouTubeApi(PageToken)
        {
             var searchText= $('#searchtext').val();
             //$('#response').append("<div id=\"searching\"><b>Searching for "+searchText+"</b></div>");
          $('#response').replaceWith("<div id=\"searching\"><b>Searching for "+searchText+"</b></div>");
 
            // Use the JavaScript client library to...