JSFiddle - React, Tailwind, and code Playground

by Sergio Kagiema

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<button class="btn-user">
  Load more puppies
 </button>
 
 <ul class="list mt-50">
   
 </ul>

CSS

.btn-user {
  display: inline-block;
  padding: 12px 5px;
  background-color: #000;
  color: #fff;
  border-radius: 0;
  border: 0;
  max-width: 250px;
  width: 100%;
}

.mt-50 {
  margin-top: 50px;
}

JavaScript

var $button = $('.btn-user');

$button.on('click', function(){

	$.ajax({
  	type: "GET",
    ulr: "https://www.reddit.com/r/aww/search.json?															q=puppy&restrict_sr=true",
    success: function(data) {
    	var $list = $('.list');
    	$list.append(data);
    },
    error: function() {
    	alert('Something went wrong')
    },
    dataType: 'json'
  });

});