SideComments markup example

side-comments-markup

<div id="commentable-area">
  <p data-section-id="1" class="commentable-section">
    This is a section that can be commented on.
  </p>
  <p data-section-id="2" class="commentable-section">
    This is a another section that can be commented on.
  </p>
  <p data-section-id="3" class="commentable-section">
    This is yet another section that can be commented on.
  </p>
</div>

adding class and section-id In my case.

MUST attr. NOT data.

my code ::

$(window).on('load', function() {
var idNum = 1;
$(".content").attr("id", "commentable-area").find("p").each(function () {
if ($(this).text == "") {
} else {
$(this).removeClass("commentable-section").addClass("commentable-section").attr("data-section-id", idNum);
idNum++;
}
});
});