How to show/hide buttons using jQuery and data()?

Question

I am trying to show and hide certain buttons based on event click. I am using jQuery and the .data() method to handle this.

Here is my markup (note - I have many repeating divs in the doc with differing ids and I trying to hone in on particular ids for my event click):

<div>
  <button id="activate001003" class="jq_activate" data-reference="B1" style="display: inline;" type="button">B1</button>
  <button id="deactivate001003" class="jq_deactivate" data-reference="B2" style="display: none;" type="button">B2</button>
  <button id="edit001003" class="jq_edit" data-reference="B3" style="display: none;" type="button">B3</button>
</div>
<div>
  <button id="activate002007" class="jq_activate" data-reference="B1" style="display: inline;" type="button">B1</button>
  <button id="deactivate002007" class="jq_deactivate" data-reference="B2" style="display: none;" type="button">B2</button>
  <button id="edit002007" class="jq_edit" data-reference="B3" style="display: none;" type="button">B3</button>
</div>

Here is my jQuery:

  $( '.jq_activate' ).click(function() {
    $(this).data('reference','B1').css('display', 'none');
    $(this).data('reference','B2').css('display', 'inline');
    $(this).data('reference','B3').css('display', 'inline');
  });

I can't get the buttons to show and hide properly on click event. Any suggestions?

Amendment

I added another group to show that the page has dozens of buttons and I am trying to hone in on only 1 set of buttons.

Answer 1

B2 and B3 are .siblings() of B1 so you should use $(this).siblings()

$('.jq_activate').click(function() {
  $(this).data('reference', 'B1').css('display', 'none');
  $(this).siblings().data('reference', 'B2').css('display', 'inline');
  $(this).siblings().data('reference', 'B3').css('display', 'inline');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button id="activate001003" class="jq_activate" data-reference="B1" style="display: inline;" type="button">B1</button>
  <button id="deactivate001003" class="jq_deactivate" data-reference="B2" style="display: none;" type="button">B2</button>
  <button id="edit001003" class="jq_edit" data-reference="B3" style="display: none;" type="button">B3</button>
</div>

Recommended version, using hide() and show() instead of css property:

$('.jq_activate').click(function() {
  $(this).data('reference', 'B1').hide();
  $(this).siblings('[data-reference="B2"]').show();
  $(this).siblings('[data-reference="B3"]').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button id="activate001003" class="jq_activate" data-reference="B1" style="display: inline;" type="button">B1</button>
  <button id="deactivate001003" class="jq_deactivate" data-reference="B2" style="display: none;" type="button">B2</button>
  <button id="edit001003" class="jq_edit" data-reference="B3" style="display: none;" type="button">B3</button>
</div>