Multiple Paper-Dialog Displaying same content in nested dom-repeat

Question

I am looking to create multiple buttons that each have their own dialog with content displayed. If I take out the paper-dialog element, the content is displayed correctly. However, after adding the paper-dialog element, when I click on the button, all the dialogs display the same content.

Do I need to feed in each individual "self" object into paper-dialog? I didn't see an option to do so in the docs.

<template is="dom-repeat" items="[[forms]]" as="self">
  <section onclick="clickHandler(event)">
    <paper-button data-dialog="animated">[[self.period]] [[self.type]]-Evaluation for [[self.name]]</paper-button>
    <paper-dialog id="animated" exit-animation="fade-out-animation"
                  with-backdrop>
      <template is="dom-repeat" items="[[self.questions]]" as="question">
        <div class="row">
          <b>Question [[questionNumber(index)]]: </b>[[question.question]] <br>
        </div>
        <div>
          <b>Answer:</b> <span>[[question.answer]]</span><br>
        </div>
      </template>
    </paper-dialog>
  </section>
</template>


function clickHandler(e) {
  var button = e.target;
  while (!button.hasAttribute('data-dialog') && button !== document.body) {
    button = button.parentElement;
  }
  if (!button.hasAttribute('data-dialog')) {
    return;
  }
  var id = button.getAttribute('data-dialog');
  var dialog = document.getElementById(id);
  if (dialog) {
    dialog.open();
  }
}

Answer 1

Try giving different Ids to each dialog. You can use something like id="animated{{index}}" where index is the index value from dom-repeat.