javascript - How to show checked checkbox infomation outside div

Question

I'm doing for cinema seating plan with php. I want to show to users what seat they selected and what price must pay in ticketinfo div with jquery on seat select and remove info when they uncheck..

    <div class="seatplan">
      <input type='checkbox' name='A1' value='200'>
      <input type='checkbox' name='A2' value='200'>
      <input type='checkbox' name='A3' value='300'>
      <input type='checkbox' name='A4' value='200'>
      <input type='checkbox' name='A5' value='300'>
    </div>
    <div class="ticketinfo">
        seat no A1   200
        seat no A3   200
       -------------------
        Total Amount 400
    </div>

Answer 1

You can listen to the change event of the checkboxes and create your result by looping over the checked elements.

$('.seatplan input[type=checkbox]').change(function() {
  var result = [];
  var total = 0;

  $('.seatplan input[type=checkbox]:checked').each(function() {
    result.push(`
      <tr>
        <td>${$(this).attr('name')}</td>
        <td>${$(this).attr('value')}</td>
      </tr>
    `);

    total += parseInt($(this).attr('value'), 10);
  });

  result.push(`
      <tr>
        <td>Total</td>
        <td>${total}</td>
      </tr>
    `);
  $('.ticketinfo tbody').html(result.join(''));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="seatplan">
  <input type='checkbox' name='A1' value='200'>
  <input type='checkbox' name='A2' value='200'>
  <input type='checkbox' name='A3' value='300'>
  <input type='checkbox' name='A4' value='200'>
  <input type='checkbox' name='A5' value='300'>
</div>
<table class="ticketinfo">
  <thead>
    <th>Seat No.</th>
    <th>Amount</th>
  </thead>
  <tbody>
  </tbody>
</table>