HTML/JQuery custom form

Question

at the moment I display data on a page that looks like the following

AB123   |  LHRLAX  |  J9  I7  C9  D9  A6   |  -0655 0910
--------------------------------------------------------
CF1153  |  LHRLAX  |  I7  J7  Z9  T9  V7   |  -0910 1305
--------------------------------------------------------
WF133   |  LHRLAX  |  Y7  T7  J9  T9  C9   |  -1500 2206

The way I output the data at the moment is like so (I use Twig and a for loop, so the below is only a representation of what I do)

<table class="terminalAvailability">
    <tr>
        <td class="flightNumber">{{ info.flightNumber }}</td>
        <td class="details">{{ info.from ~ info.to }}</td>
        <td class="seatClass">{{ seat ~ availability  }}</td>
        <td class="otherInfo">{{ info.other }}</td>
    </tr>
</table>

Now I don't want to change the look of this data, I almost don't want it looking like a form (I want it to look exactly the same). However, I need the seat ~ availability (J9, I7 etc) to be selectable. When one is selected, it should change colour. The user should be able to select as many seats/availability as they want. Other parts of the form should not be selectable, only the seat ~ availability.

What would be the best way to achieve something like this? I was initially going to use something like a checkbox, but this would change my look and feel which I dont want to do.

Any advice appreciated.

Thanks

Answer 1

this just show you an idea, the code is incomplete please change it to your need.

<input type="hidden" value="" name="seatclass">

<table>
  ...
  ...
  <td data-seat="1"> seatclass 1</td><td data-seat="2"> seatclass 2</td><td data-seat="3"> seatclass 3</td>
  ...
</table>

JQUERY 

$('td').click(
    function() {
        $(this).css() // style change 
        $('input').val($(this).data('seat')); // put value to hidden form 
        // then submit hidden form. 
    }
)