Work around select not working when more than one element is used

Looks like something is caching based on ID maybe?

packages/person-select/src/person-select-demo.js

@@ -40,7 +40,13 @@ class PersonSelectDemo extends LitElement {
                 <div class="container">
                     <form>
                         <div class="field">
-                            <label class="label">Person</label>
+                            <label class="label">Person 1</label>
+                            <div class="control">
+                                <vpu-person-select lang="${this.lang}" entry-point-url="${getAPiUrl()}"></vpu-person-select>
+                            </div>
+                        </div>
+                        <div class="field">
+                            <label class="label">Person 2</label>
                             <div class="control">
                                 <vpu-person-select lang="${this.lang}" entry-point-url="${getAPiUrl()}"></vpu-person-select>
                             </div>

packages/person-select/src/person-select.js

@@ -11,6 +11,8 @@ import commonUtils from 'vpu-common/utils';
 
 select2(window, $);
 
+var selectId = 0;
+
 class PersonSelect extends VPULitElementJQuery {
 
     constructor() {
@@ -19,6 +21,8 @@ class PersonSelect extends VPULitElementJQuery {
         this.entryPointUrl = getAPiUrl();
         this.jsonld = null;
         this.$select = null;
+        // XXX: For some reason using the same ID twice breaks select2
+        this.selectId = 'person-select' + selectId++;
     }
 
     static get properties() {
@@ -33,7 +37,7 @@ class PersonSelect extends VPULitElementJQuery {
         const that = this;
 
         this.updateComplete.then(()=>{
-            that.$select = that.$('#person-select');
+            that.$select = $(that.shadowRoot.getElementById(that.selectId));
 
             // close the selector on blur of the web component
             $(that).blur(() => {
@@ -52,6 +56,7 @@ class PersonSelect extends VPULitElementJQuery {
         const $this = $(this);
         let lastResult = {};
 
+
         // find the correct api url for a person
         const apiUrl = this.jsonld.getApiUrlForIdentifier("http://schema.org/Person");
         // const apiUrl = this.jsonld.getApiUrlForEntityName("Event");
@@ -152,13 +157,13 @@ class PersonSelect extends VPULitElementJQuery {
             <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
             <link rel="stylesheet" href="${select2CSS}">
             <style>
-                #person-select {
+                #${this.selectId} {
                     width: 100%;
                 }
             </style>
 
             <!-- https://select2.org-->
-            <select id="person-select" name="person" class="select"></select>
+            <select id="${this.selectId}" name="person" class="select"></select>
             <div id="person-select-dropdown"></div>
         `;
     }