The LIKE feature is not working when the 'Cards' blog post layout is used

To reproduce follow these steps :

• Install the Blog application version 9.11+ on xwiki 12.10.8
• Create a blog post
• Create a test page and in its content insert the macro blogpostlist to list the posts of the blog, make sure to set the layout parameter to 'cards', put something like this

  {{blogpostlist blog="Blog.WebHome" layout="cards" /}}
  

• Save and view the page
• 
• Click on the Like button and notice the behavior

Expected results : The likes counter is incremented
Current results : The likes counter is not incremented, you need to reload the page in order to see the change on the likes counter.

This issue was introduced by BLOG-181.

What happen is that the the blogpostlist macro is generating an html block for each blog post using the 'Cards' layout and the 'Cards' layout contains an html element with the CSS class "like-number" wrapped by another html element with the CSS class "like-button". So, the html structure generated by the 'Cards' layout is something like :

...
<div class="like-button">
    <span class="like-number">...</span>
  </div>
...

Note that the standard like button located at the bottom of each wiki page is using the same html stucture described above for the LIKE button.

So, the issue is caused by the fact that when the like button is clicked the javascript code used to update the likes counter is not selecting the correct html element, so, instead of selecting the Like feature button located at the bottom of the page it selects the first like button of the page which is generated by the 'Cards' blog post layout.

To fix the issue we need to prevent the 'Cards' blog post layout from relying on the "like-button" CSS class used for the standard LIKE button.