Primefaces widgetVar interfering with ui:repeat or ui:datatable

I have a <ui:repeat> that iterates over a List<String> and creates a <p:commandButton> with the value of the current String in a <p:lightBox>.
But when I add widgetVar to my <p:lightBox>'s attributes the value of the <p:commandButton> is always the String from the last iteration.

Can someone explain what happens and (as I need widgetVar) maybe point out a solution?

This is my html:

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<h:head />
<h:body>
    <ui:repeat var="thing" value="#{bugBean.things}">
        <p:lightBox widgetVar="whatever">
            <h:outputLink>
                <h:outputText value="#{thing}" />
            </h:outputLink>
            <f:facet name="inline">
                <h:form>
                        <p:commandButton action="#{bugBean.writeThing(thing)}"
                            value="#{thing}" />
                </h:form>
            </f:facet>
        </p:lightBox>
    </ui:repeat>
</h:body>
</html>

This is the backing bean:

package huhu.main.managebean;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import javax.enterprise.context.SessionScoped;
import javax.inject.Named;

@Named
@SessionScoped
public class BugBean implements Serializable {

   private static final long serialVersionUID = 1L;
   List<String> things = new ArrayList<String>();

   public BugBean(){
      things.add("First");
      things.add("Second");
      things.add("Third");
   }

   public void writeThing(String thing){
      System.out.println(thing);
   }

   public List<String> getThings() {
      return things;
   }

   public void setThings(List<String> things) {
      this.things = things;
   }

}

Solution

The widgetVar basically generates a window scoped JavaScript variable. What you're effectively doing now in JavaScript context is:

window['whatever'] = new Widget(lightboxElement1);
window['whatever'] = new Widget(lightboxElement2);
window['whatever'] = new Widget(lightboxElement3);
// ...

This way the whatever variable in JS would only refer the last one.

You should basically be giving them each an unique name, for example by adding the iteration index:

<ui:repeat var="thing" value="#{bugBean.things}" varStatus="iteration">
    <p:lightBox widgetVar="whatever#{iteration.index}">

This way it becomes effectively:

window['whatever0'] = new Widget(lightboxElement1);
window['whatever1'] = new Widget(lightboxElement2);
window['whatever2'] = new Widget(lightboxElement3);
// ...

This way you can refer the individual lightboxes by whatever0, whatever1, whatever2, etc.

Unrelated to the concrete problem: isn't it easier to use a single lightbox and update its content on every click instead?