JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container">
    <div class="row text-center guide"><h4>Click a category and see the current top 10 most popular giphy's of that category!</h4></div>
    <div class="row text-center tag-row" id="tags"></div>
    <div class="row text-center category-row">
      <input type="" name="" id="category"><button class="btn btn-secondary" id="addTag">Add Category</button>
    </div>
  </div>

  <div class="container">
    <div id="photo"></div>
  </div>

CSS

body {
      background-image: url('http://www.efoza.com/postpic/2011/04/elegant-blue-wallpaper-designs_154158.jpg');
      width: 100%;
    }
    button {
      padding: 0 2%;
      margin: 0 2%;
    }
    h4 {
      font-size: 165%;
      font-weight: bold;
      color: white;
    }
    .container {
      background-color: rgba(0, 0, 0, 0.2);
      max-width: 1000px;
      width: 100%;
    }
    .btn {
      margin-top: 2%;
      margin-bottom: 2%;
      font-size: 125%;
      font-weight: bold;
    } 
    .guide {
      padding: 3% 0 0 0;
    }
    .tag-row {
      padding: 3% 0 0 0;
    }
    .category-row {
      padding: 3% 0 ;
    }
    #photo {
      padding-bottom: 3%;
    }

JavaScript

var tags = ["dog", "dolphin", "whale", "cat", "elephant", "otter"];

    // Function for displaying movie data
      function renderButtons() {

        $("#tags").empty();

        for (var i = 0; i < tags.length; i++) {
          $("#tags").append('<button class="tag-buttons btn btn-primary">' + tags[i] + '</button>');
        }      

      } 

    // Add tags function // 

    $(document).on('click', '#addTag', function(event) {

      event.preventDefault();

      var newTag = $("#category").val().trim();
      tags.push(newTag);

      $("#tags").append('<button class="tag-buttons btn btn-primary">' + newTag + '</button>');

    });

    // Tag button function //

    $(document).on('click', '.tag-buttons', function(event) {

      // Keeps page from reloading //
      event.preventDefault();

      var type = this.innerText;
      console.log(this.innerText);
      var queryURL = "https://api.giphy.com/v1/gifs/search?q=" + window.encodeURI(type) + "&limit=10&api_key=dc6zaTOxFJmzC";

      $.ajax({
        url: queryURL,
        method: "GET"
      }).done(function(response) {
        for (var i = 0; i < response.data.length; i++) {

          $("#photo").append('<img class="gif" src="' + response.data[i].images.fixed_height_still.url + '">');
        }  
      });

      $("#photo").empty();

    });
    renderButtons();
    
    
    $('body').on('click', '.gif', function() {
    	var src = $(this).attr("src");
      if($(this).hasClass('playing')){
         //stop
         $(this).attr('src', src.replace(/\.gif/i, "_s.gif"))
         $(this).removeClass('playing');
      } else {
        //play
        $(this).addClass('playing');
        $(this).attr('src', src.replace(/\_s.gif/i, ".gif"))
      }
    });