Bootstrap 4 menu not opening other dropdowns - html

Question

Because I am trying to get the Text to remain a link and the dropdown toggle to open the dropdown, which, I've managed to achieve. But it causing Dropdown-2 to toggle/open Dropdown-1. And only Dropdown-1 is working.
Basically, can't figure out why its only opening Dropdown-1 only which ever Dropdown I click
I'm using Bootstrap 4.4.1
You can see the Pen here https://codepen.io/cr8tivly/pen/MWavBJr
This is the markup
<nav class="navbar navbar-expand-lg navbar-light">
<ul class="row row-cols-4 navbar-nav main relative list-unstyled col-6">
<li class="col nav-item dropdown" data-toggle="dropdown" aria-expanded="false">
<a class="" href="http://google.com">Dropdown-1</a>
<ul class="dropdown-menu">
<li>item-1-one</li>
<li>item-2-one</li>
<li>item-3-one</li>
<li>item-4-one</li>
</ul>
</li>
<li class="col nav-item dropdown" data-toggle="dropdown" aria-expanded="false">
<a class="" href="http://google.com">Dropdown-2</a>
<ul class="dropdown-menu">
<li>item-1-two</li>
<li>item-2-two</li>
<li>item-3-two</li>
<li>item-4-two</li>
</ul>
</li>
<li class="col">Three</li>
<li class="col">Four</li>
</ul>
</nav>

Answer 1

The problem is data-toggle="dropdown" should be on the a. Check the documentation here.
Instead of:
<li class="col nav-item dropdown" data-toggle="dropdown" aria-expanded="false">
<a>Dropdown-1</a>
Use:
<li class="col nav-item dropdown" aria-expanded="false">
<a data-toggle="dropdown">Dropdown-1</a>
Updated pen here.

Answer 2

If you want the plus sign to open the dropdown and the text to open a link you can do this:
<li class="col nav-item">
<div class="d-flex">
<a class="btn btn-link" href="http://google.com">Dropdown-2</a>
<button class="btn btn-light dropdown" id="d2" data-toggle="dropdown" aria-expanded="false">+</button>
<ul class="dropdown-menu" aria-labelledby="d2">
<li>item-1-two</li>
<li>item-2-two</li>
<li>item-3-two</li>
<li>item-4-two</li>
</ul>
</div>
</li>