Wsrtjtyk

So my goal is to make an dropdown with decrement/increment button like below.

https://imgur.com/A4zleSX

and these are my current codes

<div class="dropdown">

 <button class="btn border-0 dropdown-toggle form-control" type="button"

  id="dropdownMenu2" data-toggle="dropdown" aria-expanded="false"> 

    Dropdown</button>

 <div class="dropdown-menu" style="width: 250px; background-color: #343a40" 

  aria-labelledby="dropdownMenu2">

   <div class="dropdown-item">

     <div class="row text-white">

      <div class="col-md">

       <i class="fa fa-user mr-2"></i>Adult</div>

      <div class="col-md text-center">

       <button class="btn btn-sm btn-success mx-2">+</button>

       <span>1</span>

       <button class="btn btn-sm btn-success mx-2">+</button>

      </div>

     </div>

    </div>

   </div>

So i've managed to make till this point, but i have problems when the button is clicked inside the dropdown, it scrolls to page the top and i also don't like the background color changes when the dropdown item is hovered.
please help me to make it happen, thank you

UPDATE:
so all left is preventing the page to scroll when the button inside dropdown is clicked, can anyone help please?

Firstly you need to keep on dropdown when user click anything in it.
JS:

  $('.keep-open').on({

    "shown.bs.dropdown": function() { $(this).attr('closable', false); },

    "click":             function() { },

    "hide.bs.dropdown":  function() { return $(this).attr('closable') == 'true'; }

});



$('.keep-open #dLabel').on({

  "click": function() {

    $(this).parent().attr('closable', true );

  }

})

html:

<div class="dropdown-menu" role="menu" aria-labelledby="dLabel" style="width: 250px; background-color: #343a40" >

     <div style="display: block;text-align:center;margin-bottom:5px;margin-top:5px">

      <div style="display: inline-block;color:white">

       <i class="fa fa-user mr-2" style="margin:15px;"></i>Adult</div>



       <button class="btn btn-sm btn-success mx-2">-</button>

       <span>1</span>

       <button class="btn btn-sm btn-success mx-2">+</button>

       </div>

          <div style="display: block;text-align:center;margin-bottom:5px;">

       <div style="display: inline-block;color:white;">

       <i class="fa fa-user mr-2" style="color:white;margin:15px;"></i>Child</div>



       <button class="btn btn-sm btn-success mx-2">-</button>

       <span>1</span>

       <button class="btn btn-sm btn-success mx-2">+</button>

      </div>

      </div>

plunker: http://plnkr.co/edit/s4nmZVXpLMzZLDSzVd24?p=preview