How to access variable to pass through url_for() as src in Flask App

Question

I am currently working on a web app, in which users upload files, a ML algorithm is applied, and I want to add the functionality to view the images they originally uploaded in a Bootstrap Modal. I'm having issues, however, with accessing the variable of the result_id, which holds the filename i need to properly query from my db and subsequently get a presigned link for my AWS S3 bucket. Here are some snippets from what I currently have:

Inspection.html (extends Layout.html)

{% for result in results.items %}
...

<a href="#viewRecordModal"
                                data-toggle="modal" data-id="{{ result.id }}"
                                data-classification="Defect" data-confidence="{{ '{:.2f}'.format(result.defect_prob) }}"
                                data-position="{{ '{}in {}deg'.format(result.pos_x, result.pos_y) }}"><i
                                    class="material-icons" data-toggle="tooltip" title="View" style="color: #848484"
                                    data-placement="top">panorama</i></a>

{% endfor %}

Inspection.html (extends Layout.html)


<div id="viewRecordModal" class="modal fade">
    <div class="modal-dialog" style="max-width: 900px">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">View Record</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
                <div class="col-md-6 col-md-offset-2 centered" id="original-img">
                    <img src="{{ url_for('viewRecord',record_id = record_id) }}" width="40%" alt="Trouble Loading Image." id="original-img"/>
                </div>
            </div>
        </div>
    </div>
</div>

Routes.py


@application.route("/viewRecord/<int:record_id>", methods=['GET'])
@login_required
def viewRecord(record_id):
    record = Results.query.get_or_404(record_id)

    file_name = record.filename

    presigned_url = get_file(file_name)
    return redirect(presigned_url)

My question is, how do I get access to that record_id variable from inspection.html? I have been playing around with JQuery variables,

Layout.html 
               
$('#viewRecordModal').on('show.bs.modal', function (event) {
                    var button = $(event.relatedTarget)
                    var id = button.data('id') # this is that record_id i want to pass through the url_for
                    var modal = $(this)

                    modal.find('.modal-title').text('View Entry #' + id)

                       #this method doesn't work
                    var viewRecordUrl = "{{ url_for('viewRecord') }}"
                    var viewHeatMapUrl = "{{ url_for('viewHeatMap') }}"

                    $.getJSON(viewRecordUrl, {record_id: id}, function(response) {
                        console.log(response);
                        });

                    $.getJSON(viewHeatMapUrl, {record_id: id}, function(response) {
                        console.log(response);
                        });

                    #this also doesn't work
                    modal.find('#original-img').attr('src', "{{ url_for('viewRecord', record_id ='${val(id)}') }}")

                });

I'm very new to this stack and in a bit over my head, any tips or clarity as to how to approach this?