I have a python script using flask. I have an html file where I am using bootstrap 5.1. I already have a modal display on the webpage when a button is pressed. Then I upload a .csv file in that modal and press an upload button in the modal. I want the modal to close, then another modal to open (at which point I will display data from the uploaded .csv file but this I can probably figure out). I am unable to get the second modal to open at all.

The first thing I tried was using jinja2 in the following way.

HTML:

{% if show_upload_confirmation_modal %}
<div class="modal" id="upload_confirmation_modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                ...
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                ...
            </div>
        </div>
    </div>
</div>]
{% endif %}

Python:

@app.route("/add_item/", methods=["GET", "POST"])
def add_item():
    if request.method == "POST":
        if "upload_button" in request.form:
            file = request.files['csv_file']
            filepath = "temp_uploads/" + file.filename
            file.save(filepath)
            df = pd.read_csv(filepath)
            return render_template("add_item.html", show_upload_confirmation_modal=True)

The modal did not show on the webpage upon trying this.

The next thing I tried from some google search results was to add in some js code embedded directly into the html code. I am unsure if I did this currectly since I don't know any js, and I don't know how to code js directly into html code. Here was what I tried.

HTML:

<script>
    function openModal() {
      $('#upload_confirmation_modal').modal('show');
    }
    console.log("Hello World")
</script>
{% if show_upload_confirmation_modal %}
<script>
    $(document).ready(function() {
    openModal();
    });
    console.log("Hello World")
</script>
{% endif %}
<div class="modal" id="upload_confirmation_modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                ...

All of the above code is in the body tags of my HTML. The modal still doesn't display with the above code too. I added the print to console commands to test with and the first one gets printed but the second does not. In fact, I received an error in the console that the $ (the one before (document)) is not recognized, like so:

add_item/:91 Uncaught ReferenceError: $ is not defined
    at add_item/:91:25

So I am not too sure of what to try next. Should I leave the js in the body where it is at? Should I move it to the header? Is there a way around using the js here since it's a learning curve I don't want to work through right now?