JSFiddle - React, Tailwind, and code Playground

by Jessie Lau

HTML

<div id="tour" data-location="london">
  <button>Get Photos</button>
  <ul class="photos">

  </ul>
</div>

JavaScript

$(document).ready(function() {
  var el = $("#tour")
  el.on("click", "button", function() {
    $.ajax('/photos.html', {
      data: {location: el.data('location')},
      success: function(response) {
        $('.photos').html(response).fadeIn();
      }
    });
  });
});

My way: 

$(document).ready(function() {
  $("#tour").on("click", "button", function() {
    $.ajax('/photos.html', {
      success: function(response) {
        $('.photos').html(response).fadeIn();
      },
      data:{"location" : $("#tour").data("location")}
    });
  });
});