JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="movies">
</ul>
<form>
<input type="text" id='search'>
<input type="submit" id='submit' value="submit">

</form>

JavaScript

$(document).ready(function() {
  var apikey = "qvq7jf4n29fv8m8pxqqyxsxg";
  var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";
  var moviesSearchUrl = baseUrl + '/movies.json?apikey=' + apikey;

 $('form').submit(function (evt) {
    var $submitButton = $('#submit');
    var $searchField = $('#search');
    evt.preventDefault();
    $searchField.prop("disabled",true);
    $submitButton.attr("disabled", true).val("searching....");
    var query = $searchField.val();
    var rotten = moviesSearchUrl + '&q=' + encodeURI(query);

     $.ajax({
         dataType: "jsonp",
         url:  rotten,   
         success: searchCallback

});
var movieHTML = "";
    function searchCallback(data){
        
    var movies = data.movies;

    if (data) {
        $.each(movies,function(i,movie) {
          movieHTML += '<li class="grid-25 tablet-grid-50">';
          movieHTML += '<a href="' + movie.title + '" class="image">';
          movieHTML += '<img src="' + movie.posters.original + '"></a></li>';
        }); // end each
      } else {
        movieHTML = "<p>No photos found that match: " + animal + ".</p>"
      }
      $('#movies').html(movieHTML);
      $searchField.prop("disabled", false);
      $submitButton.attr("disabled", false).val("Search");
    
    }
 // end getJSON

  }); // end click

}); // end ready