How can I change the default ordered and unordered list providing various options in Jodit Editor?

Question

I am being able to provide option's in the menu bar but when I click on any of the option it's working absolutely fine,but if I tried to select twice it is changing at all places. For Ex. I want to make a ordered list such as:

1.Some Text here

a.option 1                 b.option 2
c.option 3                 d.option 4.

When I am trying to select some text its also converting 1 to A.

Please help.Thanks in advance

document.execCommand('insertUnorderedList',true,null);
let selectedStyle = event.target.parentNode.classList.value;
   $('li').attr('id', function(i) {
     return 'unorder'+(counter+1);
   });
$('ol > li').css({'list-style-type':selectedStyle});

You can ignore the counter part its not required.I was trying to put id at every element and use jquery to update only that part.

let counter = 0;
document.querySelectorAll (".unorder-list-select .unorder-list-main .unorder-container ul").forEach((elem)=>{
  elem.addEventListener("click",(event)=>{
  counter++;
   $('li').attr('id', function(i) {
    return 'unorder'+(counter+1);
  });
  $('ul > li').css({'list-style-type':selectedStyle});
}

HTML

<div class="order-list-select" id="orderList" draggable="true"> 
  <div> 
    <span class="jodit_popup_triangle"></span> 
    <div class="math-toolbar-top" id="orderlistHeader"></div>
    <div class="order-list-main">
      <div class="order-list-container"></div>
      <div class="order-container">
        <ol class="upper-roman">
          <li><hr></li>
        </ol>
        <ol class="decimal">
          <li><hr></li>
        </ol>
      </div>
    </div>
  </div>
</div>

Actual

1.text
2.text
Some text here
1.Txt
2.Txt

Expected

1.text
2.text
Some text here
a.Txt
b.Txt

Answer 1

I did it by Jquery don't know if its right approach but it has made me achieve my task. Below is the code for my this.

document.querySelectorAll(".unorder-list-select .unorder-list-main .unorder-container ul").forEach((elem)=>{
                elem.addEventListener("click",(event)=>{
                    counter++;
                    document.execCommand('insertUnorderedList',true,null);
                    let selectedStyle = event.target.parentNode.classList.value;
                    let select = window.getSelection().focusNode.parentElement.parentElement;
                    let ul_id = ""
                    $(select).attr('id', function(i) {
                        ul_id = "unorder"+(counter);
                        return ul_id;
                     });
                    if(selectedStyle == "right-arrow"){
                        $('#'+ul_id).css({'list-style-image':`url('icons/list-right-editor.svg')`});                        
                    }else if(selectedStyle == "open-square"){
                        $('#'+ul_id).css({'list-style-image':`url('icons/square-open-editor.svg')`});
                    }else{
                        $('ul').attr('type',function(){
                            return selectedStyle;
                        })
                        $('#'+ul_id).css({'list-style-type':selectedStyle});
                    }
                    document.querySelector(".unorder-list-select").remove();
                })
            });

Please change the classess accordingly to get the tag and click.