<!-- ... code .. -->

var id = 0;

data.forEach(function(item, i) {
      id = id+1;

$( ".button-" + id ).click(function() {
$( ".button-" + id ).toggle();

});

<!-- ... code .. -->

$( ".button-" + id ).click(function() {
$( ".button-" + id ).toggle();

<a href="" class="likebutton-1"><i class="material-icons">favorite</i></a>
<a href="" class="likebutton-1" style="display:none;"><i class="material-icons">favorite_border</i></a>

<div class="likes-1">99 likes</div>
<div class="likes-1" style="display:none;">100 likes</div>

$( ".likebutton-1" ).click(function() {
$( ".likebutton-1" ).toggle();
$( ".likes-1" ).toggle();
});

$("[class*=button-]").click(function(){
    $(this).toggle()
})

$("[class*='button-']").click(function(){
    $(this).toggle();
});

var id = 0;

data.forEach(function(item, i) {
      id = id+1;
      var bindEvents = function theOutterFunction() {
        return function() {
        $( ".button-" + id ).click(function() {
        $( ".button-" + id ).toggle();
       }
      }();
      bindEvents();
});

<div>
    <h1>Dynamic buttons added below</h1>
    <ul id="divDyno"><!-- Buttons will be added here --></ul>
</div>

$('#ulDyno').on('click', '[class*=button-]', function(e) {
    $(this).toggle();
})