Bootstrap Dropdown button not opening on click

I am trying to build a navbar with buttons using bootstrap but the dropdowns aren't opening on click. I have included the bootstrap CDN link, bootstrap css link, ajax popper link and the jquery link in the code in the right places. I haven't added any external CSS to the navbar buttons. What can be the issue here?

          <nav class="navbar navbar-expand-lg navbar fixed-top navbar-light bg-light">
      <span class="navbar-toggler-icon"></span>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto ">
        <li class="nav-item">
         <div class="new-pickup"> <a class="nav-link" id="new-pickup" href="#"><i class="fa fa-plus"id="add-plus" aria-hidden="true"></i>
           New Pickup&nbsp;&nbsp;&nbsp;&nbsp;</a></div>
        <li class="nav-item dropdown">
          <div class="sms-button">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                &nbsp;SMS&nbsp;&nbsp;
              </a>
        </div>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Delivered Status</a>
            <a class="dropdown-item" href="#">Log details</a>
          </div>
        </li>
         <li class="nav-item dropdown">
           <div class="email-button">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  &nbsp;Email&nbsp;&nbsp;
                </a>
           </div>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Deivered Status</a>
            <a class="dropdown-item" href="#">Log Status</a>
          </div>
          </li>
          <li class="nav-item">
             <div class="call-button">
               <a class="nav-link" href="#"><i class="fa fa-phone fa-flip-horizontal " aria-hidden="true"></i>
                Call&nbsp;&nbsp;&nbsp;
             </a></div>
          </li>
        </li>
      </ul>
    </div>

  </nav>