Change background colou of active div : I have created a drop down menu.I wanna change the background color of active span tag, which contains the arrow image. And on click of any dropdown option, it  should close and that option should come in the menu.

example:- if i click on option 'DROP ITEM 2' option , it should replace the 'ITEM NAME'.       



   <div class="custom-table brand-portal-panel">
                <div class="custom-table-row">
                    <div class="custom-table-cell"><div class="table-cell-data"><input type="checkbox" /></div></div>
                    <div class="custom-table-cell"><div class="table-cell-data"><ul class="nav">
                                <li class="button-dropdown">
                                    <a href="javascript:void(0)" class="dropdown-toggle">
                                        ITEM name <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
    
                                    </a>
                                    <ul class="dropdown_menu">
                                        <li>
                                            <a href="#" class="dropdown_items">
                                                Drop Item 1
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="dropdown_items">
                                                Drop Item 2
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="dropdown_items border_bottom_none">
                                                Drop Item 3
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul></div></div>
                    <div class="custom-table-cell"><div class="table-cell-data"><ul class="nav">
                                <li class="button-dropdown">
                                    <a href="javascript:void(0)" class="dropdown-toggle">
                                        DATE IMPORTED <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
                                    </a>
                                    <ul class="dropdown_menu">
                                        <li>
                                            <a href="#" class="dropdown_items">
                                                Drop Item 1
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="dropdown_items">
                                                Drop Item 2
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="dropdown_items border_bottom_none">
                                                Drop Item 3
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul></div></div>
                    <div class="custom-table-cell"><div class="table-cell-data"><ul class="nav">
                                <li class="button-dropdown">
                                    <a href="javascript:void(0)" class="dropdown-toggle">
                                        CATOGERY <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
                                    </a>
                                    <ul class="dropdown_menu">
                                        <li>
                                            <a href="#" class="dropdown_items">
                                                Drop Item 1
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="dropdown_items">
                                                Drop Item 2
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="dropdown_items border_bottom_none">
                                                Drop Item 3
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul></div></div>
                    <div class="custom-table-cell"><div class="table-cell-data right-align"><ul class="nav">
                                <li class="button-dropdown">
                                    <a href="javascript:void(0)" class="dropdown-toggle">
                                        STATUS <span id="rotate_sign" class="sign_rotate"><img src="images/dropdown.png" alt="dropdown"/></span>
                                    </a>
                                    <ul class="dropdown_menu">
                                        <li>
                                            <a href="#" class="dropdown_items">
                                                Drop Item 1
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="dropdown_items">
                                                Drop Item 2
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" class="dropdown_items border_bottom_none">
                                                Drop Item 3
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul></div></div>                            
                </div>
            </div>
        
    /*css*/
    * {
        box-sizing: border-box;
    }
    body {
        background-color: #eee;
        text-align: center;
        padding-top: 50px;
    }
    
    .nav {
        display: block;
        font-family: 'PT Sans Caption', sans-serif;
        text-transform: uppercase;
        margin: 0; 
        padding: 0;
        padding: 5px 0px 0px 0px;
    }
    
    .nav li {
        display: inline-block;
        list-style: none;
        width: 100%;
    }
    
    .nav .button-dropdown {
        position: relative;
    }
    
    .nav .button-dropdown .dropdown-toggle {
        display: block;
        padding: 0px 0px 0px 20px;
        text-decoration: none;
        font-family: 'PT Sans Caption', sans-serif;
        font-size: 7.5px;
        font-weight: bold;
        line-height: 2.33;
        letter-spacing: 0px;
        text-align: center;
        color: #666667;
    }
    .nav .button-dropdown .dropdown_items {
        display: block;
        padding: 10px 2px;
        text-decoration: none;
        font-family: 'PT Sans Caption', sans-serif;
        font-size: 7.5px;
        font-weight: bold;
        line-height: 2.33;
        letter-spacing: 0px;
        text-align: center;
        color: #666667;
        border-bottom: solid 0.5px #e4e4e4;
    }
    .border_bottom_none{
        border-bottom: solid 1px #ffffff;
    }
    .nav li a span {
        display: inline-block;
        margin-left: 5px;
        font-size: 10px;
        color: #999;
        height: 26.5px;
        background-color: #f3f3f3;
    }
    .dropdown_menu {
        z-index: 1000;
        float: left;
        /*min-width: 160px;*/
        font-size: 14px;
        list-style: none;
        border-radius: 1px; 
    }
    
    .nav li .dropdown_menu {
        display: none;
        position: absolute;
        left: 0;
        padding: 0;
        margin: 0;
        text-align: left;
        width: 100%;
        background-color: #f3f3f3;
        box-shadow: -1px 1px 0.5px 0 rgba(200, 200, 200, 0.5);
    }
    
    .nav li .dropdown_menu.active {
        display: block;
    }
    
    .nav li .dropdown_menu a {
        width: 90%;
        margin: auto;
    }
    div.custom-table{
        display: table;
        width: 100%;
    }
    div.custom-table-row{
        display: table-row
    }
    div.custom-table-cell{
        display: table-cell;
        padding: 3px;
    }
    
    .custom-table-row > .custom-table-cell{
        height: 35px;
        padding-bottom: 0px;
    }
    
    div.table-cell-data{
        position: relative;
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 5px 0;
    }
    div.table-cell-data.right-align{
        justify-content: flex-end; 
    }
    div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell{
        border-bottom: 1px solid #cccccc;
    }
    div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell img.brand-icon{
        width: 32px;
        height: 32px;
        margin: 0 5px;
        margin-right:10px;
    }
    div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:first-child{
        min-width: 5%;
        white-space: nowrap;
        border: none;
        vertical-align: middle;
    }
    div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(2){
        width: 45%;
    }
    div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(3){
        width: 25%;    
    }
    div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(4){
        width: 15%;    
    }
    div.custom-table.brand-portal-panel div.custom-table-row div.custom-table-cell:nth-child(5){
        width: 10%;
    }
    .sign_rotate{
        height: 20px;
        width: 19px;
    }
    .sign_rotate img{
        width: 100%;
        -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }
    
    /* js code */
    <script>
                jQuery(document).ready(function (e) {
                    function t(t) {
                        e(t).bind("click", function (t) {
                            t.preventDefault();
                            e(this).parent().fadeOut()
                        })
                    }
                    e(".dropdown-toggle").click(function () {
                        $("#rotate_sign").css({'background-color':'green' });
                        var t = e(this).parents(".button-dropdown").children(".dropdown_menu").is(":hidden");
                        e(".button-dropdown .dropdown_menu").hide();
                        e(".button-dropdown .dropdown-toggle").removeClass("active");
                        if (t) {
                            e(this).parents(".button-dropdown").children(".dropdown_menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
                        }
                    });
                    e(document).bind("click", function (t) {
                        var n = e(t.target);
                        if (!n.parents().hasClass("button-dropdown"))
                            e(".button-dropdown .dropdown_menu").hide();
                    });
                    e(document).bind("click", function (t) {
                        var n = e(t.target);
                        if (!n.parents().hasClass("button-dropdown"))
                            e(".button-dropdown .dropdown-toggle").removeClass("active");
                    })
                });
    
            </script>