Como inserir dropdown item com JavaScript?

Front-end
, ,
#1

Tenho dois Menus Dropdown na minha página:

<div class="container">

<div class="row">

    <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
    <div class="col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10 col-xxl-10">
    
    Categoria:
    
    <div class="dropdown">
  		<button class="btn btn-secondary dropdown-toggle col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Selecione a Categoria
  		</button>
      	<ul class="dropdown-menu col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item" href="#">Vendas</a></li>
        <li><a class="dropdown-item" href="#">Compras</a></li>
        <li><a class="dropdown-item" href="#">Cadastros</a></li>
        <li><a class="dropdown-item" href="#">Anotacoes</a></li>
        <li><a class="dropdown-item" href="#">Contas</a></li>
      	</ul>
      	
	</div>
    
    </div>
    <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
    
</div>

<div class="row">

    <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
    <div class="col-10 col-sm-10 col-md-10 col-lg-10 col-xl-10 col-xxl-10">
    
    <br/>
    
    Especificacao:
    
    <div class="dropdown">
  		<button class="btn btn-secondary dropdown-toggle col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Especifique a Categoria
  		</button>
      	<ul class="dropdown-menu col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item" href="#">Opção 01</a></li>
        <li><a class="dropdown-item" href="#">Opção 02</a></li>
        <li><a class="dropdown-item" href="#">Opção 03</a></li>
      	</ul>
      	
	</div>
	
	<br/>
    
    </div>
    <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1 col-xxl-1"></div>
    
</div>

</div>

image
image.png1366×768 27.4 KB

Eu preciso que, conforme a opção que o usuário selecionar no primeiro Menu Dropdown, seja feito alterações no segundo Menu Dropdown, setando as opções do Menu (li). Por exemplo, se o usuário clicar em “Vendas” no primeiro Menu Dropdown, eu quero que no segundo Menu Dropdown seja inserido as opções “Vendas A Prazo” || “Vendas A Vista” || “Vendas Crediário”. Como posso fazer essa navegação dinâmica, para que o segundo Menu Dropdown seja alterado de acordo com a seleção feita no primeiro Menu Dropdown?