When an element is clicked remove the selected class from all elements and add it to the one clicked. Also, set the text contents of #elementSelected to the data-seat attribute (e.g. 2A, 4D) from the selected element (this), and then show the #confirm-seat div. In the selectSeat function unbind the click event from the seat that was clicked (thi…

reserve-a-seat.html

<header class="seats-header">
  <h1>Reserve a Seat</h1>
</header>
 
<section id="seats">
 
  <div class="seating-chart">
    <h3>- First Class -</h3>
    <ol class="first-class">
      <li class="row">
        <ol>
          <li><a class="available" data-features="tv,power" data-seat="1a" href="#">A</a></li>
          <li><a data-seat="1b" data-seat="1b" href="#">B</a></li>
          <li><a data-seat="1c" data-seat="1c" href="#">C</a></li>
          <li><a data-seat="1d" data-seat="1d" href="#">D</a></li>
        </ol>
      </li>
      <li class="row">
        <ol>
          <li><a class="available" data-features="power" data-seat="2a" href="#">A</a></li>
          <li><a class="available" data-features="tv" data-seat="2b" href="#">B</a></li>
          <li><a class="available" data-features="power" data-seat="2c" href="#">C</a></li>
          <li><a data-seat="2d" data-seat="2d" href="#">D</a></li>
        </ol>
      </li>
    </ol>
 
    <h3>- Economy Class -</h3>
    <ol class="economy-class">
      <li class="row">
        <ol>
          <li><a class="available" data-seat="3a" href="#">A</a></li>
          <li><a data-seat="3b" href="#">B</a></li>
          <li><a data-seat="3c" href="#">C</a></li>
          <li><a class="available" data-seat="3d" data-features="power" href="#">D</a></li>
          <li><a class="available" data-seat="3e" data-features="tv" href="#">E</a></li>
          <li><a class="available" data-seat="3f" data-features="power" href="#">F</a></li>
        </ol>
      </li>
      <li class="row">
        <ol>
          <li><a data-seat="4a" href="#">A</a></li>
          <li><a data-seat="4b" href="#">B</a></li>
          <li><a data-seat="4c" href="#">C</a></li>
          <li><a class="available" data-seat="4d" href="#">D</a></li>
          <li><a class="available" data-seat="4e" href="#">E</a></li>
          <li><a class="available" data-seat="4f" href="#">F</a></li>
        </ol>
      </li>
      <li class="row">
        <ol>
          <li><a class="available" data-seat="5a" href="#">A</a></li>
          <li><a class="available" data-seat="5b" href="#">B</a></li>
          <li><a data-seat="5c" href="#">C</a></li>
          <li><a data-seat="5d" href="#">D</a></li>
          <li><a data-seat="5e" href="#">E</a></li>
          <li><a data-seat="5f" href="#">F</a></li>
        </ol>
      </li>
      <li class="row">
        <ol>
          <li><a class="available" data-seat="6a" href="#">A</a></li>
          <li><a data-seat="6b" href="#">B</a></li>
          <li><a data-seat="6c" href="#">C</a></li>
          <li><a data-seat="6d" href="#">D</a></li>
          <li><a data-seat="6e" href="#">E</a></li>
          <li><a data-seat="6f" href="#">F</a></li>
        </ol>
      </li>
      <li class="row">
        <ol>
          <li><a class="available" data-seat="7a" href="#">A</a></li>
          <li><a class="available" data-seat="7b" href="#">B</a></li>
          <li><a class="selected" data-seat="7c" href="#">C</a></li>
          <li><a data-seat="7d" href="#">D</a></li>
          <li><a data-seat="7e" href="#">E</a></li>
          <li><a class="available" data-seat="7f" href="#">F</a></li>
        </ol>
      </li>
      <li class="row">
        <ol>
          <li><a data-seat="8a" href="#">A</a></li>
          <li><a data-seat="8b" href="#">B</a></li>
          <li><a class="available" data-seat="8c" href="#">C</a></li>
          <li><a class="available" data-seat="8d" href="#">D</a></li>
          <li><a data-seat="8e" href="#">E</a></li>
          <li><a data-seat="8f" href="#">F</a></li>
        </ol>
      </li>
    </ol>
  </div>
  
  <div id="flight-navigation">
    <ul>
      <li><a href="/flights/815?direction=prev" rel="prev">View Earlier Flight</a></li>
      <li><a href="/flights/815?direction=next" rel="next">View Later Flight</a></li>
    </ul>
  </div>
  
  <div id="highlights">
    <h3>Highlight Seats</h3>
    <ul>
      <li><input type="checkbox" value="highlight_power" name="power">Power Port</input></li>
      <li><input type="checkbox" value="highlight_tv" name="tv">Overhead TV</input></li>
    </ul>
  </div>
 
  <aside>
    <div id="confirm-first-class" style="display:none; width:300px">
    </div>
 
    <div id="notify-me">
      <form action="/notify_me">
        <label for="phone">Insert your Phone Number</label>
        <input type="text" name="phone" id="phone"></input>
      </form>
    </div>
 
    <div id="confirm-seat" style="display:none">
      <h2>About This Seat</h2>
      <table>
        <tr>
          <td>Seat</td>
          <td id="seatSelected"></td>
        </tr>
      </table>
    </div>
 
    <div id="flight-stats" style="display:none">
      <h2>About This Flight</h2>
      <table>
        <tr>
          <td>Meal</td>
          <td class="meal"></td>
        </tr>
        <tr>
          <td>Airplane Model</td>
          <td class="model"></td>
        </tr>
        <tr>
          <td>% on Time</td>
          <td class="on-time"></td>
        </tr>
      </table>
    </div>
 
    <div id="reservations" style="display:none">
      <h2>Your Reservations</h2>
      <table>
        <tr>
          <td>Confirmation #</td>
          <td id="confirmation-number"></td>
        </tr>
      </table>
    </div>
  </aside>
</section>

selected-class.js

function selectSeat(e) {
  e.preventDefault();
  // Since the previously-selected seat will no longer be selected,
  // we need to re-register selectSeat as a click handler for it.
  // Note that you could use click(selectSeat) here instead.
  $('.selected').removeClass('selected').bind('click', selectSeat);
  // Note that we're now calling unbind() here so clicking on
  // a selected seat multiple times has no effect.
  $(this).addClass('selected').unbind('click', selectSeat);
  $('#seatSelected').text($(this).data('seat'));
  $('#confirm-seat').show();
}

$('div.seating-chart li a.available').click(selectSeat);