JS tag is adding semicolons to my content I'm trying to output matrix content to create a javascript for my gallery. When I wrap the output with the {% js %}tag each line has an extra semicolon at the end like this:
{ &quot;src&quot;: &quot;/assets/uploads/_wsHigh/cp_slideshow_lg_img1.jpg&quot;, &quot;width&quot;:&quot;1440&quot;, &quot;height&quot;:&quot;810&quot; },;
{ &quot;src&quot;: &quot;/assets/uploads/_wsHigh/cp_slideshow_lg_img2.jpg&quot;, &quot;width&quot;:&quot;1440&quot;, &quot;height&quot;:&quot;810&quot; },; 

If I output as text its not there. How would I get rid of it?
 {% js %}
     
{% if image %}  
{%- if loop.first -%}
window.addEventListener('DOMContentLoaded', function() {
    (function($) {
$('.slider-pop').on('click', function() {
         $(this).lightGallery({
             dynamic: true,
             download: false,
             zoom: false,
             hash: false,
             dynamicEl: [{% endif %}{%- if not loop.last -%}{ &quot;src&quot;: &quot;{{ image.getUrl('wsHigh') }}&quot;, &quot;width&quot;:&quot;{{ img.getWidth('wsHigh') }}&quot;, &quot;height&quot;:&quot;{{ img.getHeight('wsHigh') }}&quot; },{% endif %}
             {%- if loop.last -%}{ &quot;src&quot;: &quot;{{ image.getUrl('wsHigh') }}&quot;, &quot;width&quot;:&quot;{{ img.getWidth('wsHigh') }}&quot;, &quot;height&quot;:&quot;{{ img.getHeight('wsHigh') }}&quot; }]
         })  
     });
     })(jQuery);
     });
 {% endif %}{% endif %}{% endjs %}
I am not sure if the code does what you want it to do - but nevertheless you have three {% endif %} but only two {% if %}. Assuming the line
dynamicEl: [{% endif %}{%- if not loop.last -%}{ &quot;src&quot;: &quot;{{ image.getUrl('wsHigh') }}&quot;, &quot;width&quot;:&quot;{{ img.getWidth('wsHigh') }}&quot;, &quot;height&quot;:&quot;{{ img.getHeight('wsHigh') }}&quot; },{% endif %}

has one surplus endif tag just at the beginning of the array which prematurely ends the if clause, your code correctly would be:
{% js %}  
   {% if image %}  
       {%- if loop.first -%}
           window.addEventListener('DOMContentLoaded', function() {
               (function($) {
       $('.slider-pop').on('click', function() {
                $(this).lightGallery({
                    dynamic: true,
                    download: false,
                    zoom: false,
                    hash: false,
                    dynamicEl: [
                       {%- if not loop.last -%}{ &quot;src&quot;: &quot;{{ image.getUrl('wsHigh') }}&quot;, &quot;width&quot;:&quot;{{ img.getWidth('wsHigh') }}&quot;, &quot;height&quot;:&quot;{{ img.getHeight('wsHigh') }}&quot; },{% endif %}
                           {%- if loop.last -%}{ &quot;src&quot;: &quot;{{ image.getUrl('wsHigh') }}&quot;, &quot;width&quot;:&quot;{{ img.getWidth('wsHigh') }}&quot;, &quot;height&quot;:&quot;{{ img.getHeight('wsHigh') }}&quot; }]
                })  
            });
            })(jQuery);
            });
        {% endif %}
    {% endif %}
{% endjs %}