Toggle BootStrap drop down Icons

Question

So I am little new to bootstrap v3.3.4 and am terrible at javascript/jquery.

I am trying to toggle between the plus and minus sign when clicking a drop down menu in bootstrap's nav bar (in mobile view, so inside the mobile dropdown). I have drop down menus in my navigation and I want a plus sign to the right of each one, once you click into it the plus sign disappears and I want a minus sign to show, simple enough? I don't want to use an accordion either. I have looked around quite a bit and have seen a few examples, but none are quite the same as my situation, I feel like this should be super simple and built into bootstrap but I am not seeing it.

Here is my nav bar for the most part, I took out all the other parts that do not affect the drop down.

HTML:

<!--Nav Bar-->
<nav class="navbar navbar-default hidden-md hidden-lg hidden-md hidden-lg" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li class="dropdown hamburgerListLine">
                <i class="glyphicon glyphicon-plus pull-right"></i>
                <a href="#" data-toggle="dropdown" class="dropdown-toggle">Glass Containers</a>
                <ul class="dropdown-menu">
                    <li class="dropDownList"><a href="#">Glass Bottles</a></li>
                    <li class="dropDownList"><a href="#">Glass Jars</a></li>
                    <li class="dropDownList"><a href="#">Glass Jugs</a></li>
                    <li class="dropDownList"><a href="#">Glass Vials</a></li>
                </ul>
            </li>
            <li class="dropdown hamburgerListLine">
                <span class="glyphicon glyphicon-plus pull-right "></span>
                <a href="#" data-toggle="dropdown" class="dropdown-toggle">Plastic Containers</a>
                <ul class="dropdown-menu">
                    <li class="dropDownList"><a href="#">Plastic Bottles</a></li>
                    <li class="dropDownList"><a href="#">Plastic Jars</a></li>
                    <li class="dropDownList"><a href="#">Plastic Jugs</a></li>
                    <li class="dropDownList"><a href="#">Plastic Vials</a></li>
                    <li class="dropDownList"><a href="#">Plastic Tubes</a></li>
                </ul>
            </li>
            <li class="hamburgerList hamburgerListFlat"><a href="#">Sign In</a></li>
            <li class="hamburgerList hamburgerListFlat"><a href="#">My Account</a></li>
        </ul>
    </div>
</nav><!--Nav Bar-->

jQuery:

$('.collapse')
        .on('shown.bs.collapse', function () {
            $(this).parent().find(".glyphicon-plus")
                    .removeClass("glyphicon-plus")
                    .addClass("glyphicon-minus");
        })
        .on('hidden.bs.collapse', function () {
            $(this).parent().find(".glyphicon-minus")
                    .removeClass("glyphicon-minus")
                    .addClass("glyphicon-plus");
        });

I would prefer not to use jquery if possible, I was really hoping this was built into bootstrap. The problem with this jquery is it activates when I click the initial drop down, I want it to activate when I click the drop down within the drop down.

Is it possible to do this without jquery/javascript and with no accordion in bootstrap v3.3.4?

Fiddle: https://jsfiddle.net/4zs9r0vz/