bootstrap-multiselect | JQuery multiselect plugin based on Twitter Bootstrap | Plugin library

I am using Angular 6, am trying to add Bootstrap Multiselect in my project. But here am facing some issue bootstrap-multiselect.js not loading in page.

So am tying to add dynamically add this bootstrap-multiselect.js file, but it is not loading please help me on this

index.html

I am trying to populate a Jquery MultiSelect from a list of values retrieved from an ajax call. Currently, the call is successful however the Multiselect has nothing populated and no values are stored in the html. Would someone mind helping me out with this? I have looked for other answers, but couldn't find any similar enough to mine.

Ajax function

I have 2 problems in the multi-select function:

i)The first problem, I set the value if clicked the Show Volvo and Opel and Show Volvo and Saav buttons, will follow the value shown in the multi-select box. Now the error is if clicked the Show Volvo and Opel button, it can show the correct values, but if clicked the Show Volvo and Saav button, the value cannot show properly.

ii)The second problem, if I clicked the Show Volvo and Opel, it just can show the checked value in the multi-select box, the value of name cannot show in the multi-select box, for example, I need to show name Volvo, Opel like below this picture:

Below is my sample working coding:

I have cloned an existing project and trying to run it in my system. Since this is the first time I don't have any Gemfile.lock file in my directory. I tried running bundle install and the following errors occur:

I have some multiselects inside a popover, but whenever the popover closes, the multiselect is deleted, is there a way to put a multiselect inside a popover without it losing the selected data?

in the code I create the multiselect when I click the button, I believe this may be the cause of the problem, but I couldn't find another way to add multiselect to the popover. I followed one of the answers to this question:

https//stackoverflow.com/questions/ 22409391/how-to-put-a-multiselect-in-a-popover

that is my code:

I have been working on this all day and have progressively backed off to the most basic sample I could find. It just appears I am not successfully implementing Jquery. Is there some simple step I am missing beyond the code? An import or reference in VS2019? As I read it, I should be able to reference everything I need with a CDN. This is a reference that I used as a sample

https://www.aspsnippets.com/Articles/Multiple-Select-MultiSelect-DropDownList-with-CheckBoxes-in-ASPNet-using-jQuery.aspx

After spending the day with this

http://davidstutz.github.io/bootstrap-multiselect/ which seems to be the hub around which all of the samples are fashioned. It all makes sense. It all compiles. But for some reason, my listboxes look like regular old list boxes, not the fancy lists with checkboxes that are demonstrated in all of these links.

I am confident this is some simple reference problem. ..I am a Jquery novice but I cant accomplish this task server side unfortunately.

Here is the sample code:

I have an html table with bootstrap-multiselect in one of the columns. I want the database to delete the role when the checkbox is unchecked.

I am listening to the changes using if (isset($_POST['roles_checkbox'])). Therefore, when the checkbox is unchecked, it never gets called and nothing happens. If the user has 2 roles and 1 gets unchecked it gets deleted. Nevertheless, if the user has 1 role it cannot be deleted. I want the users to be able to have no role assigned to them.

I have an html table showing user information and have a dropdown checkbox to select roles. I am using Bootstrap Multiselect to do so. The problem is that the dropdown is only shown as such for the first user. On the console panel I get: "Found 4 elements with non-unique id #roles_checkbox:". I understand this is the cause of the problem. Same id cannot be repeated and it is inside a loop. Nevertheless, the loop is intended to display information depending on the amount of users. There are 4 users. Please see picture below:

UPDATE: I found out that I could use querySelectorAll to activate bootstrap-multiselect on every row, but .multiselect does not work on it.

I am facing an issue that I am not able to make a bootstrap multiselect box after appending a new multiselect box in table >> td.

I read the multiple threads on StackOverflow and other communities not I couldn't get a positive answer. I am trying in my code when clicking on PLUS BTN new TR will append with multiselect box. but it not working except one multiselect box.

Please help me to how I fix this code which would be work as my expectation here I am explaing.. where I am doing mistake ?

My code and error screenshot is below: