Use element id to map elements to steps

index.html

@@ -38,7 +38,7 @@ <h1 class="text--center text--white my-3">Dashboard</h1>
     <div class="block-container cards blocks px-2 pb-3">
       <div class="block tablet-up-6 laptop-up-3 desktop-up-2">
         <div class="card rounded-2"
-             data-step="1">
+             id="step-1">
           <div class="card__content">
             <h2>Headline</h2>
             <p class="skeleton mt-3"
@@ -52,7 +52,7 @@ <h2>Headline</h2>
       </div>
       <div class="block tablet-up-6 laptop-up-6 desktop-up-8">
         <div class="card rounded-2"
-             data-step="2">
+             id="step-2">
           <div class="card__content h-100">
             <div class="card__header mb-0">
               <div class="card__group">
@@ -66,7 +66,7 @@ <h2 class="card__title text--light">Your Daily Graph</h2>
       </div>
       <div class="block tablet-up-6 laptop-up-3 desktop-up-2">
         <div class="card rounded-2"
-             data-step="3">
+             id="step-3">
           <div class="card__content h-100">
             <div class="card__header">
               <div class="card__group">
@@ -80,7 +80,7 @@ <h2 class="card__title text--light">Your Daily Graph</h2>
       </div>
       <div class="block tablet-up-6 laptop-up-4 desktop-up-2">
         <div class="card rounded-2"
-             data-step="4">
+             id="step-4">
           <div class="card__content h-100">
             <div class="card__header mb-0">
               <div class="card__group">

main.js

@@ -2,8 +2,6 @@ import Handhold from './src/handhold';
 import handholdData from './steps.json';
 
 const startBtn = document.getElementById('start-button');
-console.log({ startBtn });
-
 const handhold = new Handhold(startBtn);
 handhold.setup(handholdData);
 handhold.init();

src/handhold.mjs

@@ -8,15 +8,13 @@ export default class Handhold {
     this._currentStepElement;
     this._mappedSteps;
     this._startBtn = startElement || document.querySelector('[data-start-handhold]');
-    this._stepElements;
     this._steps;
     this._listeners;
     this._root;
   }
 
   // Imports steps from JSON or JS Object
   setup(data) {
-    this.setStepElements();
 
     if (data.steps) {
       this._steps = data.steps;
@@ -27,13 +25,6 @@ export default class Handhold {
     return;
   }
 
-  setStepElements() {
-    const elements = Array.from(document.querySelectorAll('[data-step]'));
-    this._stepElements = elements.length ? elements : [];
-
-    return;
-  }
-
   // applies style configuration if available
   applyConfig() {
     if (this._config) {
@@ -91,17 +82,12 @@ export default class Handhold {
 
   // Matches steps to the related element in the DOM,
   mapSteps() {
-    if (this._stepElements.length) {
-      this._mappedSteps = this._stepElements.map((el) => {
-        const matchingStep = this._steps.find((step) => {
-          return parseInt(step.number) === parseInt(el.dataset.step);
-        });
-        return {
-          ...matchingStep,
-          element: el,
-        };
-      });
-    }
+    this._mappedSteps = this._steps.map(step => {
+      return {
+        ...step,
+        element: document.getElementById(step.elementId)
+      }
+    })
 
     if (this._mappedSteps && this._mappedSteps.length) {
       this._currentStepElement = this._mappedSteps.find((step) => {

steps.json

@@ -2,21 +2,25 @@
   "steps": [
     {
       "number": "1",
+      "elementId": "step-1",
       "title": "Your Daily Headlines",
       "content": "This is where all the latest news will appear."
     },
     {
       "number": "2",
+      "elementId": "step-2",
       "title": "Daily Graph",
       "content": "The daily graph will display relevant information."
     },
     {
       "number": "3",
+      "elementId": "step-3",
       "title": "Another Graph",
       "content": "This will show even more relevant information"
     },
     {
       "number": "4",
+      "elementId": "step-4",
       "title": "Mmmm... Pie",
       "content": "This will show even more relevant information"
     }