ui-sortable | jQuery UI Sortable for AngularJS | Widget library

There is a HTML table which is set tbody to draggable via jQuery.

In the gif :

1. Page loads initializing my sortable code (below)
2. Add a section button (irrelevant to this question)
3. Add a lesson to that section (dynamic, element didn't exist when page loaded, Important!)
4. That lesson is not sortable because it was dynamically created
5. In console, I redundantly paste my entire sortable initializer
6. The lesson becomes sortable (as desired)

My question:

When a dynamic element is created, how do I correctly "refresh" or give the new elements all the properties and events (options?) that my initialized sortable items have.

Simplest HTML pseudocode of my GIF:

Recently I had to update our jquery version from 1.x to 3.5. With that I also had to update Jquery UI to 1.12. I used the opportunity to import our js dependencies as node_modules instead of just having a copy in our repository.

When running our WebApp within the IDE everything works fine and as expected. However, as soon as I build the .exe with pyInstaller (running a grunt task to minify everything into a single app.min.js), I get the error message "g.sortable is not a function". The same problem occurs with jquery.transit.

package.json:

I need your help. I'm currently trying to make a sortable list of items. Each item can also be a child item of another one:

I'm trying to use jQuery UI features in a react app widget that I am bundling with Parcel. The app works with UI features like draggable in development using yarn start but I get an error when adding the Parcel output to a demo page.

I'm including jquery & jquery UI like this:

My app works locally, however when I try to deploy to Heroku, I get a Sprockets::FileNotFound: couldn't find file 'angular' with type 'application/javascript' error.

I have tried precompiling with RAILS_ENV=production bundle exec rake assets:precompile and purging my build cache with heroku builds:cache:purge -a findum, but still no luck. I recently migrated from Bower to Yarn– not sure if my asset path is the problem?

Has anyone run into a similar error that they were able to resolve? So many thanks 🙏.

This is my application.js :

In Elementor I am using the Social Icons component (Multi-column layout) nesting it inside a Section's Column (Flexbox layout).

However, Safari is not able to determine its position accurately because the CSS property --grid-column-gap is not implemented there properly when the element is nested inside Flexbox layout. https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap#browser_compatibility

Safari does not recognize the gaps when centering the grid, so the layout is off by 4x14px.

The below code is from Elementor (without modification), how can I solve this issue with Safari?

HTML:

With COVID we started a delivery program from our store. To make tours we get information on a page from a database. But to make the quickest tour we need to copy every single line on a new page and this is alot of work. The list we need to create looks like this:

I try to change the order of the taxonomy terms per post basis in Wordpress. On EDIT POST page, I've created a metabox containing custom taxonomy terms and managed to make them sortable via Jquery.

This is my list on Wordpress backend: