更改下拉图像并在单击时替换按钮

Question

Here I want to change the image in the button dropdown when clicked. When I try to click the dropdown image it has to swap and replace he dropdown image to the actual one. Here's the fiddle https://jsfiddle.net/320cxwo1/

<div class="btn-toolbar fixed-bottom" style="justify-content: center; display: flex;" role="toolbar" aria-label="Toolbar with button groups">
    <div class="btn-group mr-2" role="group" aria-label="First group">
        <button type="button" class="btn btn-secondary">
            <img src="https://image.flaticon.com/icons/svg/1391/1391667.svg" style="cursor:pointer" class="img-border"
                width="37px" height="37px">
        </button>
        <button type="button" class="btn btn-secondary">
            <img src="https://image.flaticon.com/icons/svg/1391/1391667.svg" class="img-border" style="cursor:pointer"
                width="37px" height="37px">
        </button>
        <button type="button" class="btn btn-secondary">
            <img src="https://image.flaticon.com/icons/svg/1391/1391667.svg" class="img-border" style="cursor:pointer"
                width="37px" height="37px">
        </button>
        <button type="button" class="btn btn-secondary">
            <img src="https://image.flaticon.com/icons/svg/1391/1391667.svg" class="img-border" style="cursor:pointer"
                width="37px" height="37px">
        </button>
    </div>

    <div class="btn-group" role="group" aria-label="Third group">
        <button type="button" class="btn btn-secondary">
            <img src="https://image.flaticon.com/icons/svg/1391/1391667.svg" class="img-border" style="cursor:pointer"
                width="37px" height="37px">
        </button>
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
            <img src="https://image.flaticon.com/icons/svg/1391/1391667.svg" class="img-border" style="cursor:pointer"
                width="37px" height="37px">
            <ul class="dropdown-menu">
                <li><a href="#"> <img src="https://image.flaticon.com/icons/svg/1391/1391669.svg" class="img-border"
                            style="cursor:pointer" width="37px" height="37px"></a></li>
                <li><a href="#"> <img src="https://image.flaticon.com/icons/svg/1391/1391668.svg" class="img-border"
                            style="cursor:pointer" width="37px" height="37px"></a></li>
                <li><a href="#"> <img src="https://image.flaticon.com/icons/svg/1391/1391661.svg" class="img-border"
                            style="cursor:pointer" width="37px" height="37px"></a></li>
            </ul>
        </button>

    </div>
</div>
.btn-toolbar{
  text-align:center;
}
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle {
background-color:  #db9c31;
  border-color: #db9c31;
  color:#db9c31;
}

Answer 1

JS only: https://jsfiddle.net/Lonce68v/
jQuery: https://jsfiddle.net/u7ockf80/

JS (vanilla):

let dropDowmMenuLink = document.querySelectorAll('button.dropdown-toggle ul.dropdown-menu li');
for(let i = 0; i < dropDowmMenuLink.length; i++){
    dropDowmMenuLink[i].addEventListener('click', function(){
       var src = this.querySelector('a img').src;
       this.parentNode.parentNode.querySelector('img').src = src;
    });
}

With jQuery:

$('button.dropdown-toggle ul.dropdown-menu li').on('click', function(){
    var src = $(this).find('a img').attr('src');
    $(this).parent().siblings('img').attr('src', src);
});