Why can document.img.src image stop changing?

Question

Django

The first loop displays the first row of 5 products, subsequent loops display what is hidden in the div block. The funny thing is that it also displays 5 products that also change the image parameter as I need, but the subsequent ones no longer change it( Why can this be? here is part of the code ;(

{% for i in pr %}
                {% if forloop.counter <= 5 %}
                    <div class="tableproduct" align="center">
                    <br>
                        {{ i.product_name }}<br><br>
                    <div style="position: absolute; float: left; top: 80px; margin-left: 20px; margin-right: 20px">
                    {% if i.product_img1 %}
                    <img onclick="document.imgcolordoor{{ forloop.counter }}.src = 'static/static/style/{{ i.product_img1 }}'" style="position: relative;" src="{% static "static/style/colortest.png" %}"><br>
                    {% endif %}{% if i.product_img2 %}
                    <img onclick="document.imgcolordoor{{ forloop.counter }}.src = 'static/static/style/{{ i.product_img2 }}'" style="position: relative;" src="{% static "static/style/colortest.png" %}"><br>
                    {% endif %}{% if i.product_img3 %}
                    <img onclick="document.imgcolordoor{{ forloop.counter }}.src = 'static/static/style/{{ i.product_img3 }}'" style="position: relative;" src="{% static "static/style/colortest.png" %}"><br>
                    {% endif %}{% if i.product_img4 %}
                    <img onclick="document.imgcolordoor{{ forloop.counter }}.src = 'static/static/style/{{ i.product_img4 }}'" style="position: relative;" src="{% static "static/style/colortest.png" %}"><br>
                    {% endif %}{% if i.product_img5 %}
                    <img onclick="document.imgcolordoor{{ forloop.counter }}.src = 'static/static/style/{{ i.product_img5 }}'" style="position: relative;" src="{% static "static/style/colortest.png" %}">
                    {% endif %}</div>
                    <div class="b11" style="position: absolute; float: left; top: 80px; left: 70px;"><img style="position: relative;" src="{% static "static/style/testdoor.png" %}" name="imgcolordoor{{ forloop.counter }}" width="130px" height="280px"></div>

                    <div style="position: relative; float: left; margin-left: 25px;">
                        <form name="callzamer" action="/shoponeclick" method="post" onsubmit="return validate_form_callzamer ( );">
                            {% csrf_token %}
                            <div id="pop-up-zamer{{ forloop.counter }}" style="background: url('{% static "static/style/fonpopup.png" %}'); height: 100%; position: fixed; top: 0px; left: 0px; width: 100%; z-index: 1;">
                                <div id="pop-zamer{{ forloop.counter }}" style="background-image: url('{% static "static/style/callme.png" %}'); background-repeat: repeat-x; padding: 5px; height: 412px; width: 547px; position: fixed; top: 130px; left: 30%; z-index: 3;">
                                    <img class="close" style="margin-right: 20px" onclick="hidewindowcall('pop-up-zamer{{ forloop.counter }}')"><br>
                                    <span style="position: absolute; top: 40px;">{{ i.product_name }}{{ i.product_firm }}</span>
                                    <div style="position: absolute; left: 20px; top: 40px;">
                                        {% if i.product_img1 %}
                                        <input type="radio" value="{{ i.product_img1 }}" checked name="colordoor" onclick="document.imgcolordoor1{{ forloop.counter }}.src = 'static/static/style/{{ i.product_img1 }}'"><img  style="position: relative;" src="{% static "static/style/colortest.png" %}"><br>
                                        {% endif %}{% if i.product_img2 %}
                                        <input type="radio" value="{{ i.product_img2 }}" name="colordoor" onclick="document.imgcolordoor1{{ forloop.counter }}.src = 'static/static/style/{{ i.product_img2 }}'"><img  style="position: relative;" src="{% static "static/style/colortest.png" %}"><br>
                                        {% endif %}{% if i.product_img3 %}
                                        <input type="radio" value="{{ i.product_img3 }}" name="colordoor" onclick="document.imgcolordoor1{{ forloop.counter }}.src = 'static/static/style/{{ i.product_img3 }}'"><img  style="position: relative;" src="{% static "static/style/colortest.png" %}"><br>
                                        {% endif %}{% if i.product_img4 %}
                                        <input type="radio" value="{{ i.product_img4 }}" name="colordoor" onclick="document.imgcolordoor1{{ forloop.counter }}.src = 'static/static/style/{{ i.product_img4 }}'"><img  style="position: relative;" src="{% static "static/style/colortest.png" %}"><br>
                                        {% endif %}{% if i.product_img5 %}
                                        <input type="radio" value="{{ i.product_img5 }}" name="colordoor" onclick="document.imgcolordoor1{{ forloop.counter }}.src = 'static/static/style/{{ i.product_img5 }}'"><img  style="position: relative;" src="{% static "static/style/colortest.png" %}">
                                        {% endif %}
                                    </div>
                                    <div class="b11" style="position: absolute; float: left; top: 40px; left: 100px;"><img onchange="console.log(imgcolordoor1{{ forloop.counter }}.src)" style="position: relative;" src="{% static "static/style/testdoor.png" %}" name="imgcolordoor1{{ forloop.counter }}" width="130px" height="280px"></div>

                                    <span style=" position: absolute; top: 100px;">
                                        <input style="max-width: 15px; border: 1px solid lightgray; border-radius: 3px; padding: 3px;" type="text" value="1" name="number{{ forloop.counter }}"> шт.
                                    </span>
                                    <br>
                                    <input id="inputtextname" style="position: absolute; top: 130px;" placeholder="Имя" onclick="value=''" type="text" name="name">
                                    <input id="inputtextcity" style="position: absolute; top: 160px;" placeholder="Город" onclick="value=''" type="text" name="city">
                                    <input id="inputtextcall" style="position: absolute; top: 190px;" placeholder="Телефон"  onclick="value=''" type="text" name="mobile">
                                    <input style="display: none" value="{{ i.product_name }} {{ i.product_firm }}" name="tov">
                                    <span style="position: absolute; top: 220px; ">
                                        <p style="margin: 0px; margin-bottom: 2px; margin-left: -35px;">Коментарий к заказу:</p>
                                        <textarea  rows="7" cols="25" name="abhzd"> </textarea>
                                    </span>
                                    <input class="shopzakaz" type="submit" value="">
                                </div>
                            </div>
                        </form>
                    </div>
                    <script>hidewindowcall('pop-up-zamer{{ forloop.counter }}')</script>
                    <div style="position: absolute; float: left; top: 390px; left: 20px;">
                        <img onclick="hidewindowcall('pop-up-zamer')" src="{% static "static/style/zamerzaktov.png" %}">
                        <img onclick="hidewindowcall('pop-up-zamer{{ forloop.counter }}')" src="{% static "static/style/shoponeclick.png" %}">
                    </div>
                    </div>
                    {% if forloop.counter < 5 %}
                        <img style="position: relative; float: left;" src="{% static "static/style/vertsep.png" %}">
                    {% endif %}
                {% endif %}
                {% endfor %}

Answer 1

The problem was in this line
Namely, in the fact that I applied name="imgcolordoor1{{ forloop.counter }}"
after I changed the name to id, everything became normal