Update value on success(using raty and bootstrap popover)

Question

I am using bootstrap popover with jquery-raty. I have hidden div showing them on popover with JS function content:. I want to update some attribute in hidden div. Suppose I've data-rating attribute in hidden div. I want to update data-rating value. I am using following statement.

('#hidden_div_1`).data('rating', '25');

When I print data attribute console.log($('#hidden_div_1').data('rating')); I get 25 which is correct. But when I hover again on particular object to display the popover I get old attribue values. Value is destroying when popover disappeared. I don't know why. Any anyone help?

This is my full jquery code. This is small jsfiddle

Thanks

EDIT 1: $('#hidden_div_1').data('rating', '25');

EDIT 2: It is strange. data-rating value is not changing. I've attached console.log output.

Code >

$('.link-container a').popover({
        content : function() { return $(this).siblings('.popover-content').html(); },
        trigger: 'click',
        html: true
    }).click(function(){
      $('.ratings').raty({
        score: function() { return $(this).attr('data-rating'); },
        click: function(score, evt, data) {
            //alert(score);
            var currentId = $(this).attr('id');
            console.log($("#"+currentId).data('rating'));
            alert(currentId);
            $("#"+currentId).attr('data-rating', score);
            console.log($("#"+currentId).data('rating'));
            $("#"+currentId).data('rating', score);
            console.log($("#"+currentId).data('rating'));

        },
          path: '/static/img/rating/',
      });
    });

alert(currentId); printing correct id.

Answer 1

EDIT

I looked at this in more detail, and the problem is that you are passing content to the Bootstrap popover.

This html content contains an ID (e.g. #hidden_div_1), but the problem is that any content you pass to the Bootstrap popover gets replicated in that popover.

In other words, you end up with duplicate IDs and JQuery does not know what element you are trying to reference.

So the solution is to put the data information into the container div (in this case link-container), like so:

<div class="link-container" data-rating="1" data-price="10">
    <a href="#" data-title="Title 1" id="r1">Click Here</a>
    <div class="temp-popover-content hidden">
        <p> Click on following images</p>
        <div class="ratings"></div>
        <p>Some content 1</p>
    </div>
</div>

And then you can store data against this link-container without confusing JQuery, like so:

$('.link-container a').popover({
    content : function() { return $(this).siblings('.temp-popover-content').html(); },
    trigger: 'click',
    html: true
}).click(function(e) {
  // Added this because popovers get confused when more than one with a raty is open
  $('.link-container a').not(this).popover('hide');
  // storage refers to the link-container div
  var storage = $(this).parent();
  $('.ratings').raty({
        score: function() { return storage.data('rating'); },
        click: function(score, evt, data) {
            storage.data('rating', score);
            console.log("Data: "+storage.data('rating')); 
        }
  });
});

Fiddle is here.