How can I create unique javascript variable names in a django template for loop?

I am using a django template to loop through hp_tracker objects. Each hp_tracker has its own js code which is used for changing the value via ajax. I'm almost certain I should have this code in the .js file but I was having trouble finding a way to uniquely select each hp_tracker without access to the django template variables in the .js file. So...I moved the js to the html template itself. I am aware this undoubtedly has massive security implications, and I'm open to discussing those as well.

Anyway, on to my question. My js fails because I have global variables(!) declared that are not unique. They are being used to control some counters and a setTimeout and I don't see how to now use them to do what I want to do.

So the for loop tries to re-declare the same variable over and over. Throughout the rest of the script I'm using JQuery which is perfectly happy to use the django variable {{ hp_tracker.id }}, but javascript is not because "-" characters, which are in the object IDs are not allowed in variable names.

What the heck should I do here to fix this hot mess. Is there a way to run my code without globals? Can I identify the objects in my for loop without using object ids?

<div id="ToolSessionPageWrapper">
<div class="tool-session-page-header">
    <div id=OpenToolSelectionMenuBtn class="arrow-down"></div>
</div>
<div class="tool-session-page-body">
    <div id="HpTrackersViewWrapper" class="tool-body">
        {% for hp_tracker in hp_trackers %}
            <div class="hp-tracker-box">
                <div id="{{hp_tracker.id}}-HpTrackerTitle" class="hp-tracker-title">{{ hp_tracker.title }}</div>
                <br />
                <form method="POST" action="{% url 'hp_change_value' hp_tracker.id %}" id="{{ hp_tracker.id }}-HpValueForm">
                    {% csrf_token %}
                    <div class="hp-control-box">
                        <button type="button" id="{{ hp_tracker.id }}-HpValueDecreaseBtn" class="hp-value-change-btn decrease">-</button>
                        <div id="{{hp_tracker.id}}-HpValue" class="hp-value">{{ hp_tracker.hp_value }}</div>
                        <div id="{{ hp_tracker.id }}-HpValueInput">{{ hp_change_value_form.hp_value }}</div>
                        <div id="{{ hp_tracker.id }}-HpChangeValueCover" class="hp-value hp-change-value-cover"></div>
                        <div id="{{ hp_tracker.id }}-HpChangeValue" class="hp-value hp-change-value"></div>
                        <button type="button" id="{{ hp_tracker.id }}-HpValueIncreaseBtn" class="hp-value-change-btn increase">+</button>
                    </div>
                </form>
            </div>
            <script>
                {#ajax call for HpValueForm#}
                function changeHpValue(form) {
                    'use strict';
                    $(form).submit(function (e) {
                        // preventing from page reload and default actions
                        e.preventDefault();
                        // serialize the form data.
                        let serializedData = $(form).serialize();
                        // make POST ajax call
                        $.ajax({
                            type: 'POST',
                            url: '{% url 'hp_change_value' hp_tracker.id %}',
                            data: serializedData,
                            success: function (response) {
                                let form_instance = JSON.parse(response['form_instance']);
                                let fields = form_instance[0]['fields'];
                                $('#{{hp_tracker.id}}-HpValue').empty().prepend(fields.hp_value);
                                console.log('ajaxSuccess');
                            },
                            error: function (response) {
                                console.log(response["responseJSON"]["error"]);
                            }
                        });
                    });
                }

                {#control timeout before hp_value increase or decrease is submitted#}
                let {{ hp_tracker.id|escapejs }}hp_add_subtract_value = $('#{{hp_tracker.id}}-HpValue').text(),
                    hp_change_value = 0,
                    timeoutHandler;
                function timeoutControl() {
                    clearTimeout(timeoutHandler);
                    timeoutHandler = setTimeout(function () {
                        $('#{{ hp_tracker.id }}-HpValueInput input').val(hp_add_subtract_value);
                        $('#{{ hp_tracker.id }}-HpValueForm').submit();
                        $('#{{hp_tracker.id}}-HpChangeValue').css({'display': 'none'});
                        $('#{{hp_tracker.id}}-HpChangeValueCover').css({'display': 'none'});
                        hp_change_value = 0;
                        $('#{{hp_tracker.id}}-HpChangeValue').empty().prepend(hp_change_value);
                    }, 2000);
                }
                {#increase the hp value#}
                $('#{{ hp_tracker.id }}-HpValueIncreaseBtn').click(function (e) {
                    'use strict';
                    hp_add_subtract_value++;
                    hp_change_value++;
                    $('#{{hp_tracker.id}}-HpChangeValue').css({'display': 'inline'});
                    $('#{{hp_tracker.id}}-HpChangeValueCover').css({'display': 'inline'});
                    $('#{{hp_tracker.id}}-HpChangeValue').empty().prepend(hp_change_value);
                    timeoutControl();
                });

                {#decrease the hp value#}
                $('#{{ hp_tracker.id }}-HpValueDecreaseBtn').click(function (e) {
                    'use strict';
                    hp_add_subtract_value--;
                    hp_change_value--;
                    $('#{{hp_tracker.id}}-HpChangeValue').css({'display': 'inline'});
                    $('#{{hp_tracker.id}}-HpChangeValueCover').css({'display': 'inline'});
                    $('#{{hp_tracker.id}}-HpChangeValue').empty().prepend(hp_change_value);
                    timeoutControl();
                });

                {#submit HpValueForm#}
                $('#{{ hp_tracker.id }}-HpValueForm').on('submit', changeHpValue('#{{ hp_tracker.id }}-HpValueForm'));
            </script>
        {% endfor %}
    </div>
</div>