JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="form">
        <form id="book_tickets">
            <fieldset>
                <legend>Booking Details</legend>
                
                <p>
                    <label for="movie_name">Choose Movie</label>
                    <select id="movie_name" name="movie_name" required autofocus>
                        <option></option>
                        <option value="Movie 1">Movie 1</option>
                        <option value="Movie 2">Movie 2</option>
                        <option value="Movie 3">Movie 3</option>
                    </select>
                </p>
                
                <p>
                    <label for="theaters">Theaters</label>
                    <input list="theaters" name="theaters" required>
                        <datalist id="theaters">
                            <option value="Inox" />
                            <option value="E Square" />
                        </datalist>
                    </input>
                </p>
                
                <p>
                    <label for="date">Select Date</label>
                    <input type="date" name="date" id="date" min="today" required />
                </p>
                
                <p>
                    <label for="email">Enter Email</label>
                    <input type="email" name="email" id="email" placeholder="[email protected]" required />
                </p>
                
                <p>
                    <label for="tickets_quantity">Number of Tickets</label>
                    <input type="number" min="1" max="10" name="tickets_quantity" id="tickets_quantity" required />
                </p>
                
                <p>
                    <label>Total Price</label>
                    <span id="total_price"></span>
                </p>
                
                <p>
                    <div id="submit_wrapper">
                        <input type="submit" id="submit"...

CSS

body{
    font-family: "Arial", Helvetica, sans-serif;
}

#container{
    text-align: center;
}

#movies_booked, #form{
    display: inline-block;
    width: 45%;
    margin: 0 auto;
    vertical-align:text-top;
}

form p{
    text-align: left;
}

fieldset, #movies_booked{
    border: 1px solid black;
    border-radius: 10px;
}		

label{
    display: inline-block;
    width: 50%;
    text-align: right;
}

#submit_wrapper{
    text-align: center;
}

JavaScript

$(document).ready(function(){
    
    checkMoviesBooked();
    
    $("#movie_name").change(function(){
        calculateTotalPrice();
    });
    
    $("#date").change(function(){
        calculateTotalPrice();
    });
    
    $("#tickets_quantity").change(function(){
        calculateTotalPrice();
    });
    
    $("#book_tickets").submit(function(event){
        event.preventDefault();
        
        if(window.localStorage){
            var moviesListJson = localStorage.getItem('movies_list');
            var movies_list = moviesListJson ? JSON.parse(moviesListJson) : [];
            var movie = $("#movie_name").val();
            movies_list.push(movie);
            localStorage.setItem('movies_list', JSON.stringify(movies_list));
        }
        
        // clear the form					
        $( '#book_tickets' ).each(function(){
            this.reset();
        });
        $("#total_price").html("");
        
        // update movies booked list
        checkMoviesBooked();
    });
});

function calculateTotalPrice(){
    if($("#tickets_quantity").val() != "" && $("#movie_name").val() != "" && $("#date").val() != ""){
        if(window.Worker){
            var blob = new Blob(
                [document.querySelector("#worker").textContent],
                {type: 'text/javascript'});
            var worker = new Worker(window.URL.createObjectURL(blob));
            
            // create worker
            //worker = new Worker("js/calculateTotalPrice.js");
            worker.onmessage = function(event){
                $("#total_price").html(event.data);
            }
            worker.onerror = function(errorObject){
                $("#total_price").html("Error: " + errorObject.message);
            }
            
            // get date
            var date = new Date($('#date').val());
            
            // get day
            var day = date.getDay();
            
            // get number of booked shows
            var number_booked_shows;
  ...