JQuery - Form appears only when button is clicked

Question

I have a webpage which has the ability to leave a review on products purchased. I am completely new to front end and used a little jquery script to make the form appear when the button is clicked. The issue is if there are multiple products purchased then there are multiple buttons(as I use a forloop to render the orders dynamically) but only the first button will actually make the form appear. Why is this? What can I do to change this behavior? Any help is greatly appreciated!

the code on the page is as follows:

    <div class="row justify-content-center">
        {% for order in object %}
        {% for order_item in order.items.all %}
        <div class="col-sm-4">
            <div class="card my-3 shadow bg-rounded">
            <img src="{{ order_item.item.image.url }}" class="card-img-top shadow bg-rounded" alt="{{ order_item.item }} ">
            <div class="card-header text-center">
                <h6><strong>{{ order_item.item.name }}</strong></h6>
            </div>
            <div class="card-body flex-column text-center">
            <button class="btn btn-primary btn-sm" id='review'>Leave a review?</button>
            </div>
            </div>
        </div>
        {% endfor %}
        {% endfor %}

    </div>

    <div class="container w-25 mb-5">
        <div class="container-fluid" id="wrapper">
            <form method="POST" id='form1'>
                {% csrf_token %}
                {% for field in form %}
                <div class="form-group px-3 my-3 {% if field.errors %}invalid{% endif %}">
                {{ field.label_tag }}
                {{ field }}
                {{ field.help_text }}
                {{ field.errors }}
                </div>
                {% endfor %}
                <button type="submit" class="btn btn-primary ml-3">Submit</button>
            </form>
        </div>
    </div>
    

</div>
{% endblock %}

{% block extra_scripts %}
<script type='text/javascript'>
$( document ).ready( function() {
    $( "#review" ).click( function() {
        $( "#form1" ).toggle("slow");
    });
});
</script>
{% endblock %}