title: css has to apply only one seat <li> ( restrict multiple select)
body: <p>bus reservation </p>
  
  <p>The following code generate multilpe <code>&lt;li&gt;</code> and when the user click seats, the selected seats css will change. but <strong>i want to restrict the multiple selection. the user has to be allow  to select only one seat, if he select second <code>&lt;li&gt;</code> (seat) , then the first one has to go unselect</strong> </p>
  
  <p>DEMO : <a href="http://demo.techbrij.com/780/seat-reservation-jquery-demo.php" rel="nofollow">http://demo.techbrij.com/780/seat-reservation-jquery-demo.php</a></p>
  
  <p>CODE : <a href="http://techbrij.com/seat-reservation-with-jquery" rel="nofollow">http://techbrij.com/seat-reservation-with-jquery</a></p>
  
  <pre><code>    $(function () {
          var settings = {
              rows: 6,
              cols: 6,
              rowCssPrefix: 'row-',
              colCssPrefix: 'col-',
              seatWidth: 30,
              seatHeight: 30,
              seatCss: 'seat',
              selectedSeatCss: 'selectedSeat',
              selectingSeatCss: 'selectingSeat'
          };
  
          var init = function (reservedSeat) {
              var str = [], seatNo, className;
              for (i = 0; i &lt; settings.rows; i++) {
                  for (j = 0; j &lt; settings.cols; j++) {
  
                      seatNo = (i + j * settings.rows + 1);   // Seat No  eg : seatNo = 0+0*0+1 (1)
                      className = settings.seatCss + ' ' + settings.rowCssPrefix + i.toString() + ' ' + settings.colCssPrefix + j.toString(); // Class each seat class Name=seat row-0 col-0
  
                      if ($.isArray(reservedSeat) &amp;&amp; $.inArray(seatNo, reservedSeat) != -1) {
                          className += ' ' + settings.selectedSeatCss;
                      }
  
                      str.push('&lt;li onclick="gettable('+ seatNo+')" class="' + className  +" table"+seatNo+ '"&gt;' 
  
                                  +'&lt;a title="' + seatNo + '"&gt;' + seatNo + '&lt;/a&gt;' +
                                '&lt;/li&gt;');
                  }
              }
              $('#place').html(str.join(''));
          };
  
  
  
  
          var bookedSeats = [5, 10, 25];
          init(bookedSeats);
  
  
          $('.' + settings.seatCss).click(function () {
          if ($(this).hasClass(settings.selectedSeatCss)){
              alert('This seat is already reserved');
          }
          else{
              $(this).toggleClass(settings.selectingSeatCss);
  
  
              }
          });
  </code></pre>