filterDropDown | JQuery plug-in DataTables adding drop | Plugin library

The idea is to show a District Overview in a dialog box and then display a table once the dialog box is closed. However, I cannot seem to get rid of the box when I click on close. The Dialog Box comes up when the By District Option is clicked(marked in Yellow) which then brings up a dropdown(marked in Red). Once a value in the dropdown is selected the Dialog Box comes up. Although the dialog box shows up, I cannot seem to close it somehow. The console gives the error I gave in the title. The screenshots and the code are below:

Here's the code:

The idea was to create an advanced search page that would enable users to filter data as per their choice by selecting as many as five options to narrow down their search. The results would then later get displayed on a table. Having said that, a user may decide to filter by either using only a single option i.e By state, or by taking multiple options i.e By Name, By District, and By Category or as said earlier up to 5 options. However, I have no way of figuring out how this can be done. You would find screenshots followed by the code below:

A scenario where the user chooses to filter using the By State option

Scenario, where the options are chosen are multiple to narrow down the search

The code is as follows:

so I have a table component with a search filter onPressEnter in the first column and I want my searchBar component to do the same thing basically.

Here in my table.js I want to pass confirm() to Searchbar.js

I want to query a database with the values i get from dropdown menu. my dropdown will look like this

my nodejs db query will look like this

I'm new to react and hooks, I'm trying to achieve a filter where the last selected filter option would set the value on my drop down toggle but at the same time change the URL when a filter is selected.

My problem is I can only do one or the other but not both. Here's my filter drop down component:

How can i make div select and unselect like checkbox when adding and removing items from array. My add/remove functionality is working fine but i don't know how to control the view. I make a div that look a like checkbox.

Filter code :-

I have an ant design table in vue rendered dynamically based on a API data response(:data-source="table_deployenv_data"):

I'm trying to put a button for each row in the datatable, which will call a function declare in methods and something will be executed

I have this template code:

I need to get some data from an api before rendering my component. I'm trying to use axios (apiClient) but it needs an await as it is a promise.

If I set the setup function to asynchronous, my template won't render. If I try to set the data variable inside an async/await block, the template obviously renders before the promise comes back with the response. How can I get the data from my API and then render my template (already tried it with OnMounted())