Javascript won't render when i put it between liquid tags {% javascript %} {% endjavascript %}

[rafikdev]

For some reason my javascript for my product-detail.liquid file won't render when in put in between the liquid tags

{% javascript %}

{% endjavascript %}

But the same code renders when i put between the HTML <script></script> tag in my product-detail.liquid section file. Can some one explain why this is?

Here is the product-detail.liquid file located in the sections directory:

<div class="small-container">
    <div class="product-container">
        <div class="row-2">
            <div class="col-2">
                <div class="img-container">
                    <img src="{{ product.images[0] | img_url: 'master' }}">
                </div>
            </div>
            <div class="col-2 text">
                <p class='product-title'>{{product.title}}</p>
                <p class=product-price>{{product.price | money}}</p>
                <div class="description">
                    <p>{{ product.description }}
                    </p>
                    <p class="inhoud">
                        100ML
                    </p>
                </div>
                {% form  'product', product, id: "add-to-cart"%}
                    <input type="hidden" id="id" name="id" value="{{ product.variants.first.id }}" />
                    <input type="hidden" id="quantity" min="1" type="number" id="quantity" name="quantity" value="1"/>
                    <div class="btn-wrap">
                         <button type="submit" class='btn' onClick="addItem('add-to-cart'); return false;">
                            in winkelmand
                        </button>
                    </div>
                {% endform %}
            </div>
        </div>   
    </div>
</div>
<div class="other-products">
    <div class="heading">
        <p>Bekijk ook</p>
    </div>
    <div class="other-product">
    	<div class="row-3">
		    {% assign this_product = product %}
		    {% for single_product in collections.frontpage.products %}
		    	{% if single_product == this_product %}
		    	{% else %}
			   
		            <div class="col-3">
		                <div class="other-product">
		                    <div class="other-img-container">
		                    	<a href="{{ single_product.url }}">
		                        	<img src="{{ single_product.images[0] | img_url: 'master'}}">
		                        </a>
		                    </div>
		                    <div class="other-description">
		                        <p class="other-title">
		                            {{ single_product.title }}
		                        </p>
		                        <p class=other-price>{{ single_product.price | money }}</p>
		                    </div>
		                </div>
		            </div>  
		    	{% endif %}
		    {% endfor %}
	    </div>
    </div>
</div>
<script type="text/javascript">
    function getCart(){
        fetch('/cart.js', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            },
        })
        .then(response => response.json())
        .then(data => {
            console.log(data.item_count)
            document.querySelector('.bag-count').innerHTML = data.item_count;
        })
        .catch((error) => {
            console.error('Error:', error);
        });
    };

    function addItem(form_id){
        let id = document.getElementById('id').value;
        let quantity = document.getElementById('quantity').value;

        let formData = {
            'items': [{
                'id': id,
                'quantity': quantity
            }]
        };

        fetch('/cart/add.js', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(formData)
            })
            .then(response => {
                getCart();
                return response.json();
            })
            .catch((error) => {
                console.error('Error:', error);
        });
    };
</script>