title: Submit form with selected concert seats with JavaScript and HTML
body: <p>I have a form with input field</p>
  
  <pre><code>&lt;select name="tickets" multiple&gt;
    &lt;option value="__ticket_id__"&gt;Ticket #&lt;/option&gt;
    &lt;option value="__ticket_id__"&gt;Ticket #&lt;/option&gt;
    &lt;option value="__ticket_id__"&gt;Ticket #&lt;/option&gt;
    &lt;option value="__ticket_id__"&gt;Ticket #&lt;/option&gt;
    ...
  &lt;/select&gt;
  </code></pre>
  
  <p>With this select, I can choose which ticket ids I want to submit with the form.</p>
  
  <p>But now I want to create a seat selector, so I need all the tickets as div elements. The seats will look something like</p>
  
  <pre><code>&lt;div class="seats"&gt;
    &lt;div class="seat"&gt;Seat Number&lt;/div&gt;
    &lt;div class="seat"&gt;Seat Number&lt;/div&gt;
    &lt;div class="seat"&gt;Seat Number&lt;/div&gt;
    &lt;div class="seat"&gt;Seat Number&lt;/div&gt;
    &lt;div class="seat"&gt;Seat Number&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I make these div elements selectable? I know that I with simple javascript can listen for clicks and then change the class of the div element.</p>
  
  <p>So a solution could be</p>
  
  <pre><code>$('.seat').click(function () {
    $(this).toggleClass('.selected-seat');
  });
  </code></pre>
  
  <p>and then something like</p>
  
  <pre><code>$('form').submit(function () {
    event.preventDefault();
  
    // submit array of ids of all those div elements with class 'selected-seat'
  });
  </code></pre>
  
  <p>However, this approach seems a bit wrong to me. Could another solution be to make the elements into something like</p>
  
  <pre><code>&lt;div class="seats"&gt;
    &lt;div class="seat"&gt;Seat Number &lt;input type="checkbox" name="seats[]" value="__ticket_id__"&gt;&lt;/div&gt;
    &lt;div class="seat"&gt;Seat Number &lt;input type="checkbox" name="seats[]" value="__ticket_id__"&gt;&lt;/div&gt;
    &lt;div class="seat"&gt;Seat Number &lt;input type="checkbox" name="seats[]" value="__ticket_id__"&gt;&lt;/div&gt;
    &lt;div class="seat"&gt;Seat Number &lt;input type="checkbox" name="seats[]" value="__ticket_id__"&gt;&lt;/div&gt;
    &lt;div class="seat"&gt;Seat Number &lt;input type="checkbox" name="seats[]" value="__ticket_id__"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and then submit my form exactly as I normally submit a form without any javascript?</p>
  
  <p>How are these seat selectors normally done?</p>