bootstrap-editable | longer supported! Please use x | Frontend Framework library

I want to use bootstrap data-toggle="table", but when I enable it, it starts to render all content in as plain text (ignoring tags).

My code looks like this

I am trying to configure x-editatable with datetimepicker. When I click to edit the date and time x-editatable returns the following error:

I have table where the data will return in it when user selects an option from drop-down but appended data does not get x-editable functionality with them.

I'd like to know how I can add x-editable to my appended data in table.

view

I am using JQuery Bootstrap-table, grouping data. found here: https://examples.bootstrap-table.com/#extensions/group-by-v2.html. The example given there currently shows an extra row (not found in JSON), but does not create expand-collapse icons or functionality.

Am I missing something? this is the code I am using in HTML file:

Previously I have implemented inline editing with X-Editable and Bootstrap 3. With Bootstrap 4 it no longer seems to work. Check out the JsFiddle here.

If I define a simple popup like this:

Below is the code that I wrote for verifying that the username and password fields present in the login page and the default text (Username in username box and Password in password box). I have also pasted the error that I am getting while executing this test. I did look around, did find a few things but nothing fits exactly in my case.

Added the - HTML for the page as requested. I have pasted the whole but had to remove some of the HTML content due to the content limit for this.

I have created a dynamic list with a bootstrap filter, but there is a problem displaying all the links.

I do not know why the HTML code is displayed

Please help me please.

cordially.

So I'm working in this large project, I'm not that into Javascript / Jquery mostly I try to work with plugins since I can't fully understand JS yet...that's why probably my question it's going to be basic or idk so:

In this project, the client want an editable input, so the usual customer can modify or set new data in all the fields, so I'm using this plugin called: X-Editable ([Ex-Editable DOcumentation][2]), the problem is that whenever someone load the page for the first time..it loads the page with the "editable state", so everyone can edit the page before even clicking a button to enable the editing, so

I let you guys a jsfiddle so you can see my code ([JsFiddle][1])

#1) I want the page to be uneditable by default and jut being editable after I click the button

The other problem that I have is that..the same button does both things, enable and disable the "editable state", so I want to have two differents buttons one to enable the editing and other to disable the editing.

I have the following code where I edit the field of a row in a table, but I want it to be more Dynamic, that is, when editing a field it jumps to the next field where I will edit. I have a success function where I should jump to the next field to edit what the Item would be, but I do not know why it does not work.