print the selected options from the jquery plugin
<p>I'm trying to use a Jquery movie seat selection plugin on my jsp website. The plugin works well and i can able to select the seat.</p>

<p>My problem is, since i don't know Jquery i could not able to print the user selected seat on my jsp page.</p>

<p>kindly help me to print the users selected seat on jsp page. So that i can use them to store on my derby database.</p>

<p>HTML</p>

<pre><code>  &lt;div class="demo"&gt;
    &lt;div id="seat-map"&gt;
        &lt;div class="front"&gt;SCREEN&lt;/div&gt;                
    &lt;/div&gt;

    &lt;div class="booking-details"&gt;


        &lt;p&gt;Seat: &lt;/p&gt;
        &lt;ul id="selected-seats"&gt;&lt;/ul&gt;
        &lt;p&gt;Tickets: &lt;span id="counter"&gt;0&lt;/span&gt;&lt;/p&gt;
        &lt;p&gt;Total: &lt;b&gt;Rs.&lt;span id="total"&gt;0&lt;/span&gt;&lt;/b&gt;&lt;/p&gt;

                    &lt;a href="ticketValidation"&gt;&lt;input type="button" value="BUY" class="checkout-button"/&gt;&lt;/a&gt;

        &lt;div id="legend"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div style="clear:both"&gt;&lt;/div&gt;
</code></pre>

<p></p>

<p>Jquery :</p>

<pre><code>      &lt;/style&gt;

    &lt;script&gt;
         var price = 120; //price
$(document).ready(function() {
var $cart = $('#selected-seats'), //Sitting Area

$counter = $('#counter'), //Votes
$total = $('#total'); //Total money

var sc = $('#seat-map').seatCharts({
    map: [  //Seating chart
        'aaaaaaaaaa',
        'aaaaaaaaaa',
        'aaaaaaaaaa',
        'aaaaaaaaaa',
        'aaaaaaaaaa',
        'aaaaaaaaaa',
        'aaaaaaaaaa',
        'aaaaaaaaaa',
        'aaaaaaaaaa',

    ],
    naming : {
        top : false,
        getLabel : function (character, row, column) {
            return column;
        }
    },
    legend : { //Definition legend
        node : $('#legend'),
        items : [
            [ 'a', 'available',   'Avail' ],
            [ 'a', 'unavailable', 'Sold']
        ]                  
    },
    click: function () { //Click event
        if (this.status() == 'available') { //optional seat
            $('&lt;li&gt;R'+(this.settings.row+1)+' S'+this.settings.label+'&lt;/li&gt;')
                .attr('id', 'cart-item-'+this.settings.id)
                .data('seatId', this.settings.id)
                .appendTo($cart);

            $counter.text(sc.find('selected').length+1);
            $total.text(recalculateTotal(sc)+price);

            return 'selected';
        } else if (this.status() == 'selected') { //Checked
                //Update Number
                $counter.text(sc.find('selected').length-1);
                //update totalnum
                $total.text(recalculateTotal(sc)-price);

                //Delete reservation
                $('#cart-item-'+this.settings.id).remove();
                //optional
                return 'available';
        } else if (this.status() == 'unavailable') { //sold
            return 'unavailable';
        } else {
            return this.style();
        }
    }
});
//sold seat
sc.get(['1_2', '4_4','4_5','6_6','6_7','8_5','8_6','8_7','8_8', '10_1', '10_2']).status('unavailable');
});
//sum total money
function recalculateTotal(sc) {
var total = 0;
sc.find('selected').each(function () {
    total += price;
});

return total;
}
&lt;/script&gt;
</code></pre>

<p>CSS:</p>

<pre><code>&lt;style&gt; 
.front{width: 300px;margin: 5px 32px 45px 32px;background-color:           #f0f0f0; color: #666;text-align: center;padding: 3px;border-radius: 5px;} 
.booking-details {float: right;position: relative;width:200px;height: 450px; } 
.booking-details h3 {margin: 5px 5px 0 0;font-size: 16px;} 
.booking-details p{line-height:26px; font-size:16px; color:#999} 
.booking-details p span{color:#666} 
div.seatCharts-cell {color: #182C4E;height: 25px;width: 25px;line-height:     25px;margin: 3px;float: left;text-align: center;outline: none;font-size: 13px;} 
div.seatCharts-seat {color: #fff;cursor: pointer;-webkit-border-radius:5px;-   moz-border-radius:5px;border-radius: 5px;} 
div.seatCharts-row {height: 35px;} 
div.seatCharts-seat.available {background-color: #B9DEA0;} 
div.seatCharts-seat.focused {background-color: #76B474;border: none;} 
div.seatCharts-seat.selected {background-color: #E6CAC4;} 
div.seatCharts-seat.unavailable {background-color: #472B34;cursor: not-allowed;} 
div.seatCharts-container {border-right: 1px dotted #adadad;width:      400px;padding: 20px;float: left;} 
div.seatCharts-legend {padding-left: 0px;position: absolute;bottom: 16px;} 
ul.seatCharts-legendList {padding-left: 0px;} 
.seatCharts-legendItem{float:left; width:90px;margin-top: 10px;line-height: 2;} 
span.seatCharts-legendDescription {margin-left: 5px;line-height: 30px;} 
.checkout-button {display: block;width:80px; height:24px; line-    height:20px;margin: 10px auto;border:1px solid #999;font-size: 14px; cursor:pointer} 
#selected-seats {max-height: 150px;overflow-y: auto;overflow-x: none;width: 200px;} 
#selected-seats li{float:left; width:72px; height:26px; line-height:26px;    border:1px solid #d3d3d3; background:#f7f7f7; margin:6px; font-size:14px; font-   weight:bold; text-align:center}
&lt;/style&gt;
</code></pre>

<p>Please Help!</p>

<p>Thanks.</p>