editable-table | tiny jQuery/Bootstrap widget | Plugin library

I use the boostable plugin to edit HTML rows inline on runtime. The plugin is on https://www.jqueryscript.net/table/Editable-Tables-jQuery-Bootstrap-Bootstable.html. The problem is now when I want to dynamically add new rows to the table, I am not able to re-initialize the table or refresh so as to make all rows Bootstable(editable)

After adding /assets/plugins/editable/bootstable.js"> The following code is the one I use ti initialize the table

I'm using Flask and Jinja2 and I need to make an attendance table that includes both editable and non-editable fields. I referred to other posts such as here and here which got me to this point. The table successfully displays the editable fields using FieldList. However, I have not been able to render the non-editable fields.

This is what the table should look like:

The only fields which should be editable are "attendance code" and "comment". Unfortunately, I have not found a way to include the other fields (class name, start time, end time, first name, last name) as simple text fields.

I have tried using the read-only attribute for WTForms. While this is functional, it displays the text in text boxes which don't look appealing.

My latest attempt shown below defines a WTForms class called updateStudentAttendanceForm that inherits the fields from another class called attendanceLogClass that includes instance variables for the desired fields. I assign the values to the form class in the routes.py file. However, when I reference these variables in the html file, they result in blank fields. I have used a print statement to verify the variable assignments are working properly. I cannot figure out why the variables do not display properly when included in the html template.

forms.py

So, a few days ago, I posted this question (nearly identical) and received a very helpful response.

However, in order to make a table calculator, I already have a id set to every table row of a certain column to turn the table into a calculator, which kind of messes up the answer for the original question when I try to apply it for myself (the JavaScript parses the unit "kg" in with the number and displays a sum as "NaN").

As well, there is a visible text box displayed inside of every cell with the answer above, which looks kind of ugly. My current code has cells that don't appear as text boxes but are still editable, which makes for a much sleeker experience in my opinion (I know it makes no functional difference, but the appearance is something that bugs me a lot!)

Below is a mock-up of what I'd like the code to look like. I'm trying to make the numbers/input appear on the right side of the text box, but still on the left side of the unit ("kg").

Below is a mock-up of what I am trying to create (except the numbers would be on the right).

Here is the code I have:

Two days ago, I asked why some content that was separated into columns was getting pushed underneath another column, and received a very helpful answer from @Josie. This did the trick until I made a table, and for some reason it broke the display order.

Some background: By creating unequal columns with CSS, I've attempted to divide up the page into a large column with main content (.leftcolumn) and slimmer column (.rightcolumn) that serves as a sidebar. However, the sidebar is getting pushed underneath the main content unless I make the width of either column 2% less than what it is.

I tried switching the order of the tags as recommended by this answer, but this had no effect. I also tried to give a display: flex property to the main content [as suggested by answers here][2], but this only combined the two sample posts in the main content along one row while having no effect on the sidebar. Something else I tested was to assign position: relative to the main content and position: absolute to the sidebar, which was [the solution given by this answer][3], but this had no effect on the actual display. I also tried @rajneesh-tiwari's suggestion below to define z-index: 999 under the sidebar's parent container, but this, too, had no effect on the display.

Below is the code. For some reason, the sidebar breaks into the bottom of the table...

Here as you can see I have 4 headings in the beginning, and then chemical composition have number of sub-headings. I want to place the data in that order.

What I have tried doing is this-