Bootstrap Button display selected item in title using Dropdown

Question

I want similar functionality as show in this question

How to Display Selected Item in Bootstrap Button Dropdown Title

But the problem is i cannot fetch unique button value it displays last selected value in all dropdown.

Here is my code which i got from above link.

HTML Bootstrap

<div class="col-2">
    <div class="dropdown">
        <button class="btn btn-warning btn-xl dropdown-toggle" type="button" id="sizevalue1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
           <span class="selection1"><i class="icon icon-center mdi mdi-plus-circle-o"></i> Names</span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li><a href="#" data-value="1"><span class="new-button-dropdown blockquote">Action 1</span></a></li>
            <li><a href="#" data-value="2"><span class="new-button-dropdown blockquote">Action 2</span></a></li>
            <li><a href="#" data-value="3"><span class="new-button-dropdown blockquote">Action 3</span></a></li>
            <li><a href="#" data-value="4"><span class="new-button-dropdown blockquote">Action 4</span></a></li>
        </ul>
    </div>
</div>
<div class="col-2">
    <div class="dropdown">
        <button class="btn btn-warning btn-xl dropdown-toggle" type="button" id="sizevalue2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
          <span class="selection2"><i class="icon icon-center mdi mdi-plus-circle-o"></i> Titles</span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li ><a href="#" data-value="10"><span class="new-button-dropdown blockquote">Action 10</span></a></li>
            <li ><a href="#" data-value="20"><span class="new-button-dropdown blockquote">Action 20</span></a></li>
            <li ><a href="#" data-value="30"><span class="new-button-dropdown blockquote">Action 30</span></a></li>
            <li ><a href="#" data-value="40"><span class="new-button-dropdown blockquote">Action 40</span></a></li>
        </ul>
    </div>
</div>

jquery

$(".dropdown-menu li a").click(function() {
   $(this).parents(".dropdown:first-child").find('.selection1').text($(this).text());       $(this).parents(".dropdown").find('.selection1').val($(this).text());
   $("#sizevalue1").val($(this).text());
});
$(".dropdown-menu li a").click(function() {          
   $(this).parents(".dropdown").find('.selection2').text($(this).text());        
   $(this).parents(".dropdown").find('.selection2').val($(this).text());        
   $("#sizevalue2").val($(this).text());
});

I have written 2 jquery but only one works for both. how to seprate this and get unique button values.

Thanks