Correct design pattern for scripts creating a new ui widget

I'm fairly new to web programming and I would like to know what is the best technique to create new ui-widgets that require javascript.

Let us consider the widget I have in mind as an example : "editable input list". This widget should act like list with items draguable (to sort), an input to add a new element to a list and a remove button for each element of the list. I would like something that resembles the UI for google maps itinerary features (for example in https://www.google.fr/maps/dir/Berlin,+Allemagne/Rome,+Italie/Paris/).

The (simplified) generated code after creation of the list might look at follows (without the javascript part).

.editableList li{
  list-style-type:none;
  display:flex;
  flex-direction:row;
  gap:10px;
}

.editableList .removeItem{
  /* Does not load */
  background-image: url("https://cdn.onlinewebfonts.com/svg/img_275375.png");
}

<ol class='editableList'>
  <li> 
    <div class='dragElement'></div> 
    <div class='mainElement'>List Item 1</div>
    <button class='removeItem'></button>
  </li>
  <li> 
    <div class='dragElement'></div> 
    <div class='mainElement'>List Item 2</div>
    <button class='removeItem'></button>
  </li>
  <!-- moreItems -->
  <!-- Add Items button -->
  <li> 
    <button class='addElement'>Add Element</button> 
  </li>
</ol>

My question: what is the best practices when writing reusable scripts that create such widgets? Mainly:

1. It feels more sensible for the user to write html like the following and have the script I provide automatically transform it into the previous html (adding delete buttons, add button, ...) using javascript. Is this a correct approach?

<ol class='editableList'>
      <li> 
        <div class='mainElement'>List Item 1</div>
      </li>
      <li> 
        <div class='mainElement'>List Item 2</div>
      </li>
      <!-- moreItems -->
      <!-- Add Items button automatically added -->
    </ol>

2. How to handle modification of the list content from other scripts in the webpage? Should I propose a function such as "refresh" that recomputes the html ? Or should I provide a "addItem" function which directly writes the correct html?

3. For the javascript part, I do not think I need a refresh function or anything: everything seems possible on creation, even handling added items thanks to Event Delegation. Am I wrong?

These are the two main questions I have in mind for now, but I expect once those are answered that I'll come across new questions. Apart from the above questions, any advice/literature on how to provide modern widget programming interfaces (I do not aim to support old browsers)? Maybe some insight could come from how jQuery UI and bootstrap achieve this, but I do not know whether the approach is modern and what the exact design pattern is.

PS: if anyone knows of a widget that already has those features, that would be awesome (but I have not found in bootstrap or jQuery and the overall question on how to properly create custom widgets remains).