JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<script src="https://code.jquery.com/ui/1.12.0-rc.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0-rc.1/themes/smoothness/jquery-ui.css">
<div class="row">
  <img src="http://lorempixel.com/75/75/abstract/1">
  <p class="hotelName">Hotel 1</p>
  <button>Book Hotel</button>
</div>

<div class="row">
  <img src="http://lorempixel.com/75/75/abstract/2">
  <p class="hotelName">Hotel 2</p>
  <button>Book Hotel</button>
</div>

<div id="dialog">
  <h1></h1>
  <img>
</div>

CSS

.row { border: 1px solid blue; padding: 5px; margin: 5px; }

JavaScript

$('#dialog').dialog({
  autoOpen: false,
  title: "Book a Hotel",
  modal: true
});

$('.row button').click(function() {
  var thisHotel = $(this).parents('.row');
  $('h1', '#dialog').html( thisHotel.find('.hotelName').html() );
  $('img', '#dialog').attr( 'src', thisHotel.find('img').attr('src') );
  $('#dialog').dialog( 'open' );
});