Cacher is the code snippet organizer for pro developers

$(document).ready(function(){
  $('#getUsers').on('click', function(){
    $.ajax({
      method: 'GET',
      url: 'http://reqr.es/api/users?page=1',
      success: function(data){
        console.log(data.data);
        for(var i = 0; i < data.data.length; i++){
          $('#userInfo' + (i + 1)).html(
            "<div>"+
              "<h1>"+data.data[i].first_name+
                " "+data.data[i].last_name+
              "</h1>"+
              "<img src="+data.data[i].avatar+">"+
            "</div>"
          );
        }
      }
    });
  });

  $('#addUser').on('click', function(e){
    e.preventDefault();
    $.ajax({
      method: 'POST',
      url: 'http://reqr.es/api/users',
      data: {name: $('#name').val(), job: $('#job').val()},
      success: function(data){
        $('#userBox').append(
          "<h1>"+ data.name +"</h1>"+
          "<h2>"+ data.job +"</h2>"
        );
      }
    });
  });
});