Dynamic Form Fields depending on previous values

Question

Hello and apologies if this is a dumb question. I am making a modal which is part of a wider project and one of the main selectors is between different types of products. What I want is that if product X is selected, then a certain series of other input fields appears , for Product Y another series and so on. What would be the simplest way to implement this? I am also using JavaScript and Bootstrap for front-end.

Section of code below:

<div id="mymodal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Add New Site</h4>
            </div>
            <div class="modal-body">
                <form action="{{url_for('insert')}}" method="POST">

                    <div class="form-group">

                        <label>Site ID:</label>
                        <input type="text" class="form-control" name="id" required="1">

                    </div>

                    <div class="form-group">

                        <label>Product:</label>
                        <select id="product" class="form-control" name="product" required="1">
                            <option value="0"  >Select Type</option>
                            <option value="X" >X</option>
                            <option value="Y"  >Y</option>
                            <option value="Z"  >Z</option>
                          


                        </select>
                       </div>