From acad5932a5e672ec3cd7dd27d011b16691be93e4 Mon Sep 17 00:00:00 2001
From: Alan Sangma <asangma@esri.com>
Date: Thu, 10 Oct 2019 09:58:36 -0700
Subject: [PATCH] fix(demos): updated ids (#318).

---
 src/demos/calcite-value-list.html | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/demos/calcite-value-list.html b/src/demos/calcite-value-list.html
index 63ffc416..17c0ca2a 100644
--- a/src/demos/calcite-value-list.html
+++ b/src/demos/calcite-value-list.html
@@ -99,8 +99,18 @@ <h3>label-editing-enabled & single select</h3>
           </calcite-action>
         </calcite-value-list-item>
       </calcite-value-list>
-      <h4>No text-description</h4>
-      <calcite-value-list id="two" label-editing-enabled>
+      <script>
+          const valueList2 = document.querySelector("#two");
+          valueList2.addEventListener("calciteListSelectionChange", (event) => {
+            console.log(event.detail);
+          });
+          valueList2.addEventListener("calciteListItemChange", (event) => {
+            console.log(event.target);
+            console.log(event.detail);
+          });
+        </script>
+      <h3>No text-description</h3>
+      <calcite-value-list id="three" label-editing-enabled>
           <calcite-value-list-item
           text-label="2018 Generation Alpha Population (Born 2017 or Later)"
           value="GENALPHACY">
@@ -136,17 +146,17 @@ <h4>No text-description</h4>
           </calcite-value-list-item>
         </calcite-value-list>
       <script>
-        const valueList2 = document.querySelector("#two");
-        valueList2.addEventListener("calciteListSelectionChange", (event) => {
+        const valueList3 = document.querySelector("#three");
+        valueList3.addEventListener("calciteListSelectionChange", (event) => {
           console.log(event.detail);
         });
-        valueList2.addEventListener("calciteListItemChange", (event) => {
+        valueList3.addEventListener("calciteListItemChange", (event) => {
           console.log(event.target);
           console.log(event.detail);
         });
       </script>
       <h3>drag-enabled</h3>
-      <calcite-value-list id="three" drag-enabled>
+      <calcite-value-list id="four" drag-enabled>
         <calcite-value-list-item text-label="OBJECTID" text-description="OBJECTID" value="OBJECTID" icon="grip">
           <calcite-action slot="secondaryAction" id="action-test" label="click-me" onClick="console.log('clicked');">
             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
@@ -189,11 +199,11 @@ <h3>drag-enabled</h3>
         </calcite-value-list-item>
       </calcite-value-list>
       <script>
-        const valueList3 = document.querySelector("#three");
-        valueList3.addEventListener("calciteListSelectionChange", (event) => {
+        const valueList4 = document.querySelector("#four");
+        valueList4.addEventListener("calciteListSelectionChange", (event) => {
           console.log(event.detail);
         });
-        valueList3.addEventListener("calciteValueListOrderChange", (event) => {
+        valueList4.addEventListener("calciteValueListOrderChange", (event) => {
           console.log('sort order changed');
           console.log(event.detail);
         });