同一django模板中的Javascript变量

在我的django应用程序中，有一个javascript模式，它从后端检索所有可用的图像。（我在模板中发送一个django变量，并在模式上显示所有图像）

在应用程序中，我有Gridster小部件，上面已经有一些通过JSON上传的图像

每个按钮上都有一个

+

按钮，用于打开模式，用户可以在单击

+

按钮的小部件上添加图像

当前状态

当我单击

+

按钮时打开的模式当前包含所有图像。由于小部件上存在图像，我不希望这些图像出现在模式中

所需输出

我希望模态实时更新。在所有可用的图像中，模态应该只显示小部件上不存在的图像

我到目前为止所做的事情

widget上的图像的名称位于widget上的

textarea

中。一旦我删除图像，该图像的名称就会从

textarea

中删除

在js中，我提取了

textarea

的内容，并将其从模板发送的django变量中删除（其中包含所有图像的名称）

因此，结果变量

filteredBrands

是一个包含特定小部件上不存在的图像名称的变量

我不知道如何在循环中传递这个变量，循环当前正在获取所有图像，以便只渲染那些不在特定小部件上的图像

JS函数，该函数生成

filteredBrands

变量

 var parentLI;
    var selectedImageSRC = "";
    var imageNameValue;
    var brandsFromBackend;

    $(document).on("click", ".addmorebrands", function() {
        parentLI = $(this).closest('li');                         //Getting the widget in which on which the + button is pressed   
        imageNameValue = parentLI.children('.imagenames').val();   //Getting list existing of images which are there on widget from the textarea
        brandsFromBackend = document.getElementById("myVar").value;  //Getting the django template variable having all the images
        brandsFromBackend = brandsFromBackend.replace(/'/g, '"');    
        brandsFromBackend = JSON.parse(brandsFromBackend);    //Converting django variable to JS array
        console.log(brandsFromBackend);
        ////Convert brands on widget to filteredBrands 
        imageNameValueArray = imageNameValue.split(',')       //Converting the textarea(existing images list) content to list           
       console.log(imageNameValueArray);

         //Loop that removes the images which are present on widgets from the array having all the images(django variable JS array)
         var filteredBrands = brandsFromBackend; 
        console.log(filteredBrands);

        for(var j = 0; j < imageNameValueArray.length; j++) {

                for (var i=filteredBrands.length-1; i>=0; i--) {
                    if (filteredBrands[i] === imageNameValueArray[j]) {
                        filteredBrands.splice(i, 1);
                        // break;       //<-- Uncomment  if only the first term has to be removed
                    }
                }
        }


        console.log("filteredBrands");
        console.log(filteredBrands);

        brandsFiltered = JSON.stringify(filteredBrands);
        console.log(brandsFiltered);            //Final list of filtered images which are to be shown in the modal. I want to pass this variable to

        $('#exampleModalCenter').modal('show');
    });

要了解整个过程，请看一下这个。它并不完全反映我的应用程序（因为我有django），但我希望它至少能帮助了解其他事情

更新1

请有人帮我，因为我甚至不确定这是否可行/正确。我对此一无所知

  {% for file in brands %}  
        {% load static %}
            <div class="outerdiv"><img class="img-fl" src="{% get_static_prefix %}images/brands/{{file}}" alt=""></div>
        {% endfor %}

<input type="hidden" id="myVar" name="variable" value="{{ brands }}">