So guys I've created some buttons that have to show different messages on click but after I click on one button also the others show the same message as it.
I'd also need some tips on how to make this section of my website responsive. 
Here is how the section looks like on the site: [![enter image description here](https://i.stack.imgur.com/Sox83.png)](https://i.stack.imgur.com/Sox83.png)

And here's the code: <https://jsfiddle.net/eLu2n6pj/1/>

```js
var counter = 0;

$("#tasto1").click(function() {
  $("#blocco").animate({
    'opacity': '1'
  }, 500);

  if (counter <= 0) {
    $(".testo").append('<b name="grassetto">Test 1');
    counter++;
  }
});

$(function() {
  $('#tasto1').blur(function() {
    $('#blocco').animate({
      'opacity': '0'
    }, 500);
  });
});

$("#tasto2").click(function() {
  $("#blocco").animate({
    'opacity': '1'
  }, 500);
  if (counter <= 0) {

    $(".testo").append('Test 2');
    counter++;
  }
});

$(function() {
  $('#tasto2').blur(function() {
    $('#blocco').animate({
      'opacity': '0'
    }, 500);
  });
});

$("#tasto3").click(function() {
  $("#blocco").animate({
    'opacity': '1'
  }, 500);
  if (counter <= 0) {

    $(".testo").append('Test 3');
    counter++;
  }
});
```

```css
P {
  color: black;
}

#blocco {
  position: relative;
  top: 35px;
  border: 2px solid #555;
  padding: 20px;
  border-radius: 10px;
  opacity: 0;
}

button[type="button"] {
  margin-bottom: 4px;
  width: 270px;
}

ul {
  list-style-type: none;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<section class="feature-area relative pt-100 pb-20" name="infobox">
  <div class="overlay overlay-bg"></div>
  <div class="container">
    <div class="row align-items-center justify-content-center">
      <div class="col-lg-4 col-md-6" name="asppi">
        <div class="single-feature" name="testo">
          <ul>
            <li>
              <button id="tasto1" type="button" class="btn btn-secondary" data-placement="right">
              Button 1
              </button>
            </li>
            <li>
              <button id="tasto2" type="button" class="btn btn-secondary" data-placement="right">
              Button 2
              </button>
            </li>
            <li>
              <button id="tasto3" type="button" class="btn btn-secondary" data-placement="right">
              Button 3
              </button>
            </li>
          </ul>
        </div>
      </div>
      <div class="col-lg-4 col-md-6">
        <div id="blocco" class="single-feature">
          <p class="testo"></p>
        </div>
      </div>
    </div>
  </div>
</section>
```

Thanks for the help.