JSFiddle - React, Tailwind, and code Playground

by isherwood

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<ul id="rooms">
    <li><a data-toggle="modal" data-target="#myModal" data-id="10">Room 10</a>
    </li>
    <li><a data-toggle="modal" data-target="#myModal" data-id="20">Room 20</a>
    </li>
    <li><a data-toggle="modal" data-target="#myModal" data-id="30">Room 30</a>
    </li>
    <li><a data-toggle="modal" data-target="#myModal" data-id="40">Room 40</a>
    </li>
</ul>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title" id="myModalLabel">Modal title</h4>

            </div>
            <div class="modal-body">
                <p>Your room number is: <span class="roomNumber"></span>.</p>                                
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

JavaScript

$('#myModal').on('show.bs.modal', function (e) {
    var myRoomNumber = $(e.relatedTarget).attr('data-id');
    $(this).find('.roomNumber').text(myRoomNumber);
});