Django-Javascript - materialcss breaks javascript code when adding new elements to the body of html template

Question

Well this is making my head spin... When I run the following code in a test environment without material css loaded, I get the expected output, a dropdown menu with animals to select from. However, if I run this exact same code with material css loaded, it just displays the title and no dropdown is visible. Why does this happen?

html

{% extends 'base.html' %}
{% load materializecss %}
{% block content %}
    <button id  = 'id_graph_type'>Add Stuff</button>
{% endblock %}

javascript

graphInput.addEventListener('click', e=>{
    var values = ["dog", "cat", "parrot", "rabbit"];
 
    var select = document.createElement("select");
    select.name = "pets";
    select.id = "pets"
   
    for (const val of values) {
      var option = document.createElement("option");
      option.value = val;
      option.text = val.charAt(0).toUpperCase() + val.slice(1);
      select.appendChild(option);
    }
   
    var label = document.createElement("label");
    label.innerHTML = "Choose your pets: "
    label.htmlFor = "pets";
   
    document.body.appendChild(label).appendChild(select);
})

question from:https://stackoverflow.com/questions/66046438/django-javascript-materialcss-breaks-javascript-code-when-adding-new-elements

Answer 1

Waitting for answers