How to dynamically change data-content value in bootstrap popover?

Question

JavaScript

There is a button, when clicked, bootstrap's popover appears.



The click counter itself and the preparation of the message I did. But I don't know

how to send this message exactly to . Button code here https://codepen.io/anon/pen/BRpdKOdata-content="Надо менять эту надпись"

<button type="button" class="btn btn-default click"
data-container="body" 
data-toggle="popover" 
data-placement="right" 
data-content="Надо менять эту надпись">
  Счетчик
</button>

<div id="output">Вот здесь выводится как надо</div>

<script>
/* Это код бутстрапа, что бы работал popover */
$(function () {
  $('[data-toggle="popover"]').popover()
})
/* Это код который я нашел и он был просто счетчик цифрами, который я модифицировал под счетчик с текстом */
$(document).ready(function() {
        var x;
        x = 0;
        $('.click').click(function() {
           
          $('#output').html(function(i, val) {
            //alert( x );
            if (x < 2) {
              return 'Один';
            } else if (x == 3) {
              return 'несколько';
            } else if (x > 3){
              return 'Много';
            }

            });
          x = x+1;	
        });
      });	

</script>

Answer 1

Made https://codepen.io/anon/pen/jmBqey
The code is naturally terrible, I don't know js.

Answer 2

In addition to changing data-attributes, it is necessary to store information about the number of clicks on the server, otherwise everything will be reset after the page is reloaded