Do you know how to fix this code?

[ColombiaDev]

Do you know how to fix this code?

In this code I am trying to show 1 image 1 modal in a product that I specify but when I add another block and another block to show another image and another modal totally different in another product that creates a loop for the number of blocks that I have created and the same image is seen in the same product according to the number of blocks that I have.

How can I solve it so that when I add a block I see a single image and a single modal and not repeated?

<div class="productView-group">
  <button class="button-custom" id="myBtn">
    <div class="media media-img">
      {% for block in section.blocks %}
        {% if product == block.settings.product_float %}
          {%- if block.settings.float_image != blank -%}
            {%- assign img_url = block.settings.float_image -%}
            <img
              {% if settings.enable_lazyload and forloop.first == false %}
                data-
              {% endif -%}
              srcset="
                {%- if img_url.width < 320 -%}{{ img_url | image_url: width: img_url.width }} 320w,{%- endif -%}
                {%- if img_url.width >= 320 -%}{{ img_url | image_url: width: 375 }} 375w,{%- endif -%}
                {%- if img_url.width >= 740 -%}{{ img_url | image_url: width: 740 }} 740w,{%- endif -%}
                {%- if img_url.width >= 750 -%}{{ img_url | image_url: width: 750 }} 750w,{%- endif -%}
                {%- if img_url.width >= 1100 -%}{{ img_url | image_url: width: 1100 }} 1100w,{%- endif -%}
                {%- if img_url.width >= 1370 -%}{{ img_url | image_url: width: 1370 }} 1370w,{%- endif -%}
                {%- if img_url.width >= 1500 -%}{{ img_url | image_url: width: 1500 }} 1500w,{%- endif -%}
                {%- if img_url.width >= 1770 -%}{{ img_url | image_url: width: 1770 }} 1770w,{%- endif -%}
                {%- if img_url.width >= 1780 -%}{{ img_url | image_url: width: 1780 }} 1780w,{%- endif -%}
                {%- if img_url.width >= 1920 -%}{{ img_url | image_url: width: 1920 }} 1920w,{%- endif -%}
                {%- if img_url.width >= 2000 -%}{{ img_url | image_url: width: 2000 }} 2000w,{%- endif -%}
                {%- if img_url.width >= 2800 -%}{{ img_url | image_url: width: 2800 }} 2800w{%- endif -%}
              "
              {% unless settings.enable_lazyload and forloop.first == false %}
                src="{{ img_url | image_url: width: 750 }}"
              {% endunless %}
              alt="{{ img_url.alt  | escape }}"
              width="{{ img_url.width }}"
              height="{{ img_url.width | divided_by: img_url.aspect_ratio | round }}"
              {% if settings.enable_lazyload and forloop.first == false %}
                class="lazyload" loading="lazy"
              {% endif %}
            >
          {%- endif -%}
        {% endif -%}
      {%- endfor %}
    </div>
  </button>
</div>

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    {% for block in section.blocks %}
      {%- if block.settings.float_video != blank -%}
        <video controls controlsList="nodownload" style="width:-webkit-fill-available;">
          <source src="{{ block.settings.float_video }}" type="video/mp4">
          Tu navegador no soporta HTML5 video.
        </video>
      {%- endif -%}
    {% endfor %}
  </div>
</div>

[JohnSmith6 · Accepted solution]

Basically that not how block work. It is for static content for every page with same template.

If you need different modal with specific image/content for each product, you better use a dynamic source content. Best way I think it is to use a metafield

[ColombiaDev]

It may be a better way out, yes. I will try it this way.