Update seat count in seating chart

by seatsio

HTML

<label for="seatsDropdown">Select number of seats:</label>
<select id="seatsDropdown" onchange="updateSeatCount()">
    <option value="3 seats">3 seats</option>
    <option value="4 seats">4 seats</option>
    <option value="5 seats">5 seats</option>
</select>
<div id="chart"></div>
<script src="https://cdn.seatsio.net/chart.js"></script>
<script>

    const seatSelectionMapping = {
        "3 seats": 3,
        "4 seats": 4,
        "5 seats": undefined
    };

		const defaultCategory = '3 seats'
    let chart = new seatsio.SeatingChart({
        divId: 'chart',
        publicKey: '53b1ee0f-6611-4826-95a9-197be43a55e7',
        event: '3e380be9-c6af-48da-969f-25d4a555a204',
        availableCategories: [defaultCategory],
        numberOfPlacesToSelect: seatSelectionMapping[defaultCategory]
    }).render();

    function updateSeatCount() {
        const selectedCategory = document.getElementById("seatsDropdown").value;
        const numberOfPlacesToSelect = seatSelectionMapping[selectedCategory] || 1;

        chart.changeConfig({
            availableCategories: [selectedCategory],
            numberOfPlacesToSelect: numberOfPlacesToSelect
        });
    }
</script>