Select 'this' object of clicked element only (not the other elements within the same class)

Question

I am trying to change buttons text on click (using Bootstrap 4). I have a problem with using the correct syntax.

My html:

<div class="btn-group">
  <button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenuButton2">
  Option 1                  
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
    <a class="dropdown-item" href="#">Option 2</a>
    <a class="dropdown-item" href="#">Option 3</a>
 </div>
</div>

<div class="btn-group">
  <button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenuButton2">
  Type 1                  
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
    <a class="dropdown-item" href="#">Type 2</a>
    <a class="dropdown-item" href="#">Type 3</a>
 </div>
</div>

and JS:

$(".dropdown-menu a").click(function () {

  $(".btn:first-child").html($(this).text());

});

To rephrase - when I click on one button and change its value, the other one changes too...

So I would like to change this value of the only clicked.

Answer 1

You need to change the html of the .btn relative to your link.

You can do that by selecting the closest .btn-group to your link, then searching for .btn inside it :

$(".dropdown-menu a").click(function () {
  $(this).closest('.btn-group').find('.btn').html($(this).text());
});

 $(".dropdown-menu a").click(function() { $(this).closest('.btn-group').find('.btn').html($(this).text()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="btn-group"> <button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenuButton2"> Option 1 </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2"> <a class="dropdown-item" href="#">Option 2</a> <a class="dropdown-item" href="#">Option 3</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenuButton2"> Type 1 </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton3"> <a class="dropdown-item" href="#">Type 2</a> <a class="dropdown-item" href="#">Type 3</a> </div> </div> 

Answer 2

 $(".dropdown-menu a").click(function () { var text = $(this).text(); $(this).closest('.btn-group').find('.btn').html(text); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="btn-group"> <button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenuButton2"> Option 1 </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2"> <a class="dropdown-item" href="#">Option 2</a> <a class="dropdown-item" href="#">Option 3</a> </div> </div> <div class="btn-group"> <button type="button" class="btn btn-outline-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="dropdownMenuButton2"> Type 1 </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton3"> <a class="dropdown-item" href="#">Type 2</a> <a class="dropdown-item" href="#">Type 3</a> </div> </div> 

Answer 3

Try

$(".dropdown-menu a").click(function () {

$(this).parent().find(".btn:first-child").html($(this).text());

});