Изменение цены билета в зависимости от выбранного чекбокса и создание массива полученных данных

Нужно создать страницу с возможностью забронировать билеты на поезд. Для начала пользователь выбирает направление поезда и дату поездки, дальше отмечает места для брони. Информацию нужно вывести в таблицу и записать в массив.

Вообщем-то, основу я сделала. У меня вопрос - как менять сумму билетов одновременно с тем как пользователь нажал на чекбокс, а не после нажатия на кнопку "Book" как я сделала. Т.е. пользователь нажал на один чекбокс, сумма сразу стала 64, на второй - поменялась на 128.

Второе - как сохранить полученные данные в массиве объектов (направление, дата, выбранные места). И еще по дате - сейчас она выводится гггг-мм-дд. Можно ли ее поменять на формат - дд.мм.гггг?

Я не так давно изучаю JavaScript, поэтому приму любые замечания касаемо оформления кода. СSS еще не оформляла, как делать знаю.

<label for="direction">Direction:</label>
                <select class="direction">
                    <option>Odessa - Lviv</option>
                    <option>Odessa - Kiev</option>
                    <option>Odessa - Moscow</option>
                    <option>Odessa - Nikolaev</option>
                </select>
    <label for="date">Date</label>
    <input type="date" class="date">
    <button type="button">Search</button>        
    <div class="out"></div>
<script>
    let direction = document.querySelector(".direction");
    let date = document.querySelector(".date");
    let btn = document.querySelector("button");
    let out = document.querySelector(".out");
    let hr = document.createElement("hr");
    let div = document.createElement("div");
    div.className = "places";
    let btnBook = document.createElement("button");
    btnBook.className = "btn_book";
    btnBook.innerHTML = "Book";
    let sum = 0;
    let totalSum = document.createElement("div");
    totalSum.innerHTML = "Total price: <b>" + sum + "</b>";
    let table = document.createElement("table");
    let tableHead = document.createElement("tr");
    tableHead.innerHTML = "<th>Direction</th><th>Date</th><th>Seat</th>"
    let p = document.createElement("p");
    p.innerHTML = "<b>My tickets:</b>";

    btn.addEventListener("click", function(){
        out.append(hr);
        out.append(div);
        for (i = 1; i <= 28; i++) {
            let checkbox = document.createElement("checkbox");
            checkbox.className = "create_checkbox";
            checkbox.innerHTML = '<input type="checkbox" value="' + i + '" class="checkbox"><label for="checkbox">' + i + '</label>';
            div.append(checkbox);
        };
         div.append(totalSum);
        div.append(btnBook);

        let allCheckbox = document.querySelectorAll("input[type='checkbox']");  


    btnBook.addEventListener("click", function(){
        out.append(p); 
        out.append(table);
        table.append(tableHead);
      for (let elem of allCheckbox) {
            if (elem.checked == true) {
              for (let k = 0; k < elem.checked; k++)          
                sum = sum + 64;
                let tableBody = document.createElement("tr");
                tableBody.innerHTML = "<tr><td>" + direction.value + "</td><td>" + date.value + "</td><td>" + elem.value + "</td></tr>";
                table.append(tableBody)
            };
          totalSum.innerHTML = "Total price: <b>" + sum + "</b>";
        };

        });
    }); 
 </script>