Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript How to add data-id to button, allowing me to remove the 2nd container

Can you help me?

The whole goal or overarching objective here is being able to remove the 2nd container from the code.

My HTML is repetitive. Since I only show one player at a time, I should only have a single container.

I’m already using data-container on each button to figure out which video container I want to play.

Instead I want to have a single video player element/container, and just pass the corresponding data-id directly from the button instead. Where I can then instantiate the video player in the same process to load only the video that is clicked.

<div class="video video-frame">

So for example, I’m using play2 to go find a video container named play2 and doing actions to show that specific container. In that container I have an element that has the data-id of my YouTube video -Xgi_way56U

So instead of creating a playX container for every single video, I want to put -Xgi_way56U on the button instead. When the button is clicked, I want to take that ID and pass it into the video player element to load it on demand.

The idea here would be to attach the id data-id="-Xgi_way56U"

to the button:

<button class="playa2 cover" type="button" data-container="play1"></button>

Which would then become this:

<button class="playa2 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>

I have been told by multiple people now, I should only be needing 1 container.

They said it is unnecessary duplication where only 1 container is all that should be needed.

The idea here would be to add the data-id="" to the buttons, which should allow me to remove the 2nd container from the code.

I have not been able to figure out how to do this.

How the code works is, after clicking a button a video will appear on the screen, click the X the buttons return to the screen where you can click on the 2nd button and a video will appear on the screen.

Two buttons should be able to run off of one of these, that are inside 1 container, instead of needing multiple containers for each button.

<div class="video video-frame">

Here is the code working with 2 containers: https://jsfiddle.net/7apg90wz/

Code:
<div class="container play1 with-curtain">
  <div class="inner-container curtain ">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame" data-id="-Xgi_way56U"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>
<div class="container play2 with-curtain">
  <div class="inner-container curtain">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame" data-id="0dgNc5S8cLI"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

Here is the container with buttons:
Code:
<div class="playButtonContainer with-curtain">
  <button class="playa1 cover" type="button" data-container="play1"></button>
  <button class="playa2 cover" type="button" data-container="play2"></button>
</div>

Removing 1 container I have this now: https://jsfiddle.net/82rxzq7h/

The code is not working now because more stuff is needed to be done.

I don’t know what else is needed to be done, or how to achieve this, of being able to remove the 2nd container from the code.

I have been having a very difficult time trying to figure out how to do this in the code.

Code:
<div class="container play1 with-curtain">
  <div class="inner-container curtain">
    <div class="ratio-keeper">
      <div class="wrap">
        <div class="video video-frame"></div>
      </div>
    </div>
    <button class="exit" type="button" title="Exit" aria-label="Close"></button>
  </div>
</div>

Here is the container with buttons: Where I attached the data-id="" to them.
Code:
<div class="playButtonContainer with-curtain">
  <button class="playa1 cover" type="button" data-container="play1" data-id="-Xgi_way56U"></button>
  <button class="playa2 cover" type="button" data-container="play1" data-id="0dgNc5S8cLI"></button>
</div>

I tried to provide as much detail in here as possible in what I am trying to do in the code.

If you may have any questions, or would like to know more information, please ask.
 
Solution
What can be done to figure out how to fix it?
OK I Got it
1669670649074.png

1669670845919.png

Also, sorry for the late reply, been in and out of meetings all for the most part of today. Not gonna lie, as I was going through your code, I found myself a bit confused at times due to the naming conventions you use. Go ahead and make these changes, and clean up the code a little as far as those console logs and those functions you commented out, and you should be good to go!
NOTE: Please try to use better naming conventions.
querySelectorAll returns an array of Nodes which contain elements that have the attribute "data-container" with a value of "play1". If there are multiple elements with that, then use querySelectorAll. If there is only one element, please use querySelector

So, then this?

JavaScript:
function onYouTubeIframeAPIReady() {
  let playerVarsList = {
    "0": {
      playerVars: {
        playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
      }
    },
    "3": {
      videoId: "0dgNc5S8cLI"
    },
    "5": {
      playerVars: {
        list: "PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq",
        listType: "playlist"
      }
    },
    "7": {
      playerVars: {
        end: 1800,
        playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g",
        start: 150


      }


    }
  };
 
  document.querySelectorAll("[data-container=\"play1\"]");

  ['0', '3', '5', '7'].forEach(function callback(value, index) {
    players.add(".playSingle" + index, (playerVarsList[index] || {}));
  });
 
So, then this?

JavaScript:
function onYouTubeIframeAPIReady() {
  let playerVarsList = {
    "0": {
      playerVars: {
        playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g"
      }
    },
    "3": {
      videoId: "0dgNc5S8cLI"
    },
    "5": {
      playerVars: {
        list: "PLYeOyMz9C9kYmnPHfw5-ItOxYBiMG4amq",
        listType: "playlist"
      }
    },
    "7": {
      playerVars: {
        end: 1800,
        playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g",
        start: 150


      }


    }
  };
 
  document.querySelectorAll("[data-container=\"play1\"]");

  ['0', '3', '5', '7'].forEach(function callback(value, index) {
    players.add(".playSingle" + index, (playerVarsList[index] || {}));
  });
What about it?
 
I removed const totalP = from it.

I was supposed to do that, right?

JavaScript:
document.querySelectorAll("[data-container=\"play1\"]");

  ['0', '3', '5', '7'].forEach(function callback(value, index) {
    players.add(".playSingle" + index, (playerVarsList[index] || {}));
  });
first of all, why did you remove it? Second of all why did you have it there in the first place? Third of all, why do you need to query for data-container?
 
first of all, why did you remove it? Second of all why did you have it there in the first place? Third of all, why do you need to query for data-container?

I should remove this line?

JavaScript:
const totalP =  document.querySelectorAll("[data-container=\"play1\"]");

ok Edit fiddle - JSFiddle - Code Playground

JavaScript:
//const totalP =  document.querySelectorAll("[data-container=\"play1\"]");

  ['0', '3', '5', '7'].forEach(function callback(value, index) {
    players.add(".playSingle" + index, (playerVarsList[index] || {}));
  });
 
I should remove this line?

JavaScript:
const totalP =  document.querySelectorAll("[data-container=\"play1\"]");

ok Edit fiddle - JSFiddle - Code Playground

JavaScript:
//const totalP =  document.querySelectorAll("[data-container=\"play1\"]");

  ['0', '3', '5', '7'].forEach(function callback(value, index) {
    players.add(".playSingle" + index, (playerVarsList[index] || {}));
  });
why do you need it? what is its purpose?
 
What I know is that the code can't work written this way:

JavaScript:
const totalP =  document.querySelectorAll("[data-container=\"play1\"]");

  ['0', '3', '5', '7'].forEach(function callback(value, index) {
    players.add(".playSingle" + index, (playerVarsList[index] || {}));
  });

Because, ['0', '3', '5', '7']. is where totalP would be placed.

How would I resolve that?
 
What I know is that the code can't work written this way:

JavaScript:
const totalP =  document.querySelectorAll("[data-container=\"play1\"]");

  ['0', '3', '5', '7'].forEach(function callback(value, index) {
    players.add(".playSingle" + index, (playerVarsList[index] || {}));
  });

Because, ['0', '3', '5', '7']. is where totalP would be placed.

How would I resolve that?
ok, keep this line
JavaScript:
const totalP =  document.querySelectorAll("[data-container=\"play1\"]");
and add a console log right underneath it to see what totalP is, then screenshot the results
 
ok, keep this line
JavaScript:
const totalP =  document.querySelectorAll("[data-container=\"play1\"]");
and add a console log right underneath it to see what totalP is, then screenshot the results

Way too much to screenshot.

The results: Edit fiddle - JSFiddle - Code Playground
  • Code:
    [object NodeList] {  0: [object HTMLButtonElement] {    accessKey: "",    addEventListener: function addEventListener() { [native code] },    after: function after() { [native code] },    animate: function animate() { [native code] },    append: function append() { [native code] },    appendChild: function appendChild() { [native code] },    ariaAtomic: null,    ariaAutoComplete: null,    ariaBrailleLabel: null,    ariaBrailleRoleDescription: null,    ariaBusy: null,    ariaChecked: null,    ariaColCount: null,    ariaColIndex: null,    ariaColSpan: null,    ariaCurrent: null,    ariaDescription: null,    ariaDisabled: null,    ariaExpanded: null,    ariaHasPopup: null,    ariaHidden: null,    ariaInvalid: null,    ariaKeyShortcuts: null,    ariaLabel: null,    ariaLevel: null,    ariaLive: null,    ariaModal: null,    ariaMultiLine: null,    ariaMultiSelectable: null,    ariaOrientation: null,    ariaPlaceholder: null,    ariaPosInSet: null,    ariaPressed: null,    ariaReadOnly: null,    ariaRelevant: null,    ariaRequired: null,    ariaRoleDescription: null,    ariaRowCount: null,    ariaRowIndex: null,    ariaRowSpan: null,    ariaSelected: null,    ariaSetSize: null,    ariaSort: null,    ariaValueMax: null,    ariaValueMin: null,    ariaValueNow: null,    ariaValueText: null,    assignedSlot: null,    attachInternals: function attachInternals() { [native code] },    attachShadow: function attachShadow() { [native code] },    ATTRIBUTE_NODE: 2,    attributes: [object NamedNodeMap] { ... },    attributeStyleMap: [object StylePropertyMap] { ... },    autocapitalize: "",    autofocus: false,    baseURI: "https://fiddle.jshell.net/_display/?editor_console=true",    before: function before() { [native code] },    blur: function blur() { [native code] },    CDATA_SECTION_NODE: 4,    checkValidity: function checkValidity() { [native code] },    checkVisibility: function checkVisibility() { [native code] },    childElementCount: 0,    childNodes: [object NodeList] { ... },    children: [object HTMLCollection] { ... },    classList: [object DOMTokenList] { ... },    className: "playSingle0 cover",    click: function click() { [native code] },    clientHeight: 0,    clientLeft: 0,    clientTop: 0,    clientWidth: 0,    cloneNode: function cloneNode() { [native code] },    closest: function closest() { [native code] },    COMMENT_NODE: 8,    compareDocumentPosition: function compareDocumentPosition() { [native code] },    computedStyleMap: function computedStyleMap() { [native code] },    contains: function contains() { [native code] },    contentEditable: "inherit",    dataset: [object DOMStringMap] { ... },    dir: "",    disabled: false,    dispatchEvent: function dispatchEvent() { [native code] },    DOCUMENT_FRAGMENT_NODE: 11,    DOCUMENT_NODE: 9,    DOCUMENT_POSITION_CONTAINED_BY: 16,    DOCUMENT_POSITION_CONTAINS: 8,    DOCUMENT_POSITION_DISCONNECTED: 1,    DOCUMENT_POSITION_FOLLOWING: 4,    DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32,    DOCUMENT_POSITION_PRECEDING: 2,    DOCUMENT_TYPE_NODE: 10,    draggable: false,    ELEMENT_NODE: 1,    elementTiming: "",    enterKeyHint: "",    ENTITY_NODE: 6,    ENTITY_REFERENCE_NODE: 5,    firstChild: null,    firstElementChild: null,    focus: function focus() { [native code] },    form: null,    formAction: "https://fiddle.jshell.net/_display/?editor_console=true",    formEnctype: "",    formMethod: "",    formNoValidate: false,    formTarget: "",    getAnimations: function getAnimations() { [native code] },    getAttribute: function getAttribute() { [native code] },    getAttributeNames: function getAttributeNames() { [native code] },    getAttributeNode: function getAttributeNode() { [native code] },    getAttributeNodeNS: function getAttributeNodeNS() { [native code] },    getAttributeNS: function getAttributeNS() { [native code] },    getBoundingClientRect: function getBoundingClientRect() { [native code] },    getClientRects: function getClientRects() { [native code] },    getElementsByClassName: function getElementsByClassName() { [native code] },    getElementsByTagName: function getElementsByTagName() { [native code] },    getElementsByTagNameNS: function getElementsByTagNameNS() { [native code] },    getInnerHTML: function getInnerHTML() { [native code] },    getRootNode: function getRootNode() { [native code] },    hasAttribute: function hasAttribute() { [native code] },    hasAttributeNS: function hasAttributeNS() { [native code] },    hasAttributes: function hasAttributes() { [native code] },    hasChildNodes: function hasChildNodes() { [native code] },    hasPointerCapture: function hasPointerCapture() { [native code] },    hidden: false,    id: "",    inert: false,    innerHTML: "",    innerText: "",    inputMode: "",    insertAdjacentElement: function insertAdjacentElement() { [native code] },    insertAdjacentHTML: function insertAdjacentHTML() { [native code] },    insertAdjacentText: function insertAdjacentText() { [native code] },    insertBefore: function insertBefore() { [native code] },    isConnected: true,    isContentEditable: false,    isDefaultNamespace: function isDefaultNamespace() { [native code] },    isEqualNode: function isEqualNode() { [native code] },    isSameNode: function isSameNode() { [native code] },    labels: [object NodeList] { ... },    lang: "",    lastChild: null,    lastElementChild: null,    localName: "button",    lookupNamespaceURI: function lookupNamespaceURI() { [native code] },    lookupPrefix: function lookupPrefix() { [native code] },    matches: function matches() { [native code] },    name: "",    namespaceURI: "http://www.w3.org/1999/xhtml",    nextElementSibling: [object HTMLButtonElement] { ... },    nextSibling: [object Text] { ... },    nodeName: "BUTTON",    nodeType: 1,    nodeValue: null,    nonce: "",    normalize: function normalize() { [native code] },    NOTATION_NODE: 12,    offsetHeight: 0,    offsetLeft: 0,    offsetParent: null,    offsetTop: 0,    offsetWidth: 0,    onabort: null,    onanimationend: null,    onanimationiteration: null,    onanimationstart: null,    onauxclick: null,    onbeforecopy: null,    onbeforecut: null,    onbeforeinput: null,    onbeforematch: null,    onbeforepaste: null,    onbeforexrselect: null,    onblur: null,    oncancel: null,    oncanplay: null,    oncanplaythrough: null,    onchange: null,    onclick: null,    onclose: null,    oncontentvisibilityautostatechange: null,    oncontextlost: null,    oncontextmenu: null,    oncontextrestored: null,    oncopy: null,    oncuechange: null,    oncut: null,    ondblclick: null,    ondrag: null,    ondragend: null,    ondragenter: null,    ondragleave: null,    ondragover: null,    ondragstart: null,    ondrop: null,    ondurationchange: null,    onemptied: null,    onended: null,    onerror: null,    onfocus: null,    onformdata: null,    onfullscreenchange: null,    onfullscreenerror: null,    ongotpointercapture: null,    oninput: null,    oninvalid: null,    onkeydown: null,    onkeypress: null,    onkeyup: null,    onload: null,    onloadeddata: null,    onloadedmetadata: null,    onloadstart: null,    onlostpointercapture: null,    onmousedown: null,    onmouseenter: null,    onmouseleave: null,    onmousemove: null,    onmouseout: null,    onmouseover: null,    onmouseup: null,    onmousewheel: null,    onpaste: null,    onpause: null,    onplay: null,    onplaying: null,    onpointercancel: null,    onpointerdown: null,    onpointerenter: null,    onpointerleave: null,    onpointermove: null,    onpointerout: null,    onpointerover: null,    onpointerrawupdate: null,    onpointerup: null,    onprogress: null,    onratechange: null,    onreset: null,    onresize: null,    onscroll: null,    onsearch: null,    onsecuritypolicyviolation: null,    onseeked: null,    onseeking: null,    onselect: null,    onselectionchange: null,    onselectstart: null,    onslotchange: null,    onstalled: null,    onsubmit: null,    onsuspend: null,    ontimeupdate: null,    ontoggle: null,    ontransitioncancel: null,    ontransitionend: null,    ontransitionrun: null,    ontransitionstart: null,    onvolumechange: null,    onwaiting: null,    onwebkitanimationend: null,    onwebkitanimationiteration: null,    onwebkitanimationstart: null,    onwebkitfullscreenchange: null,    onwebkitfullscreenerror: null,    onwebkittransitionend: null,    onwheel: null,    outerHTML: "&lt;button class=\&quot;playSingle0 cover\&quot; type=\&quot;button\&quot; data-container=\&quot;play1\&quot; data-id=\&quot;M7lc1UVf-VE\&quot;&gt;&lt;/button&gt;",    outerText: "",    ownerDocument: [object HTMLDocument] { ... },    parentElement: [object HTMLDivElement] { ... },    parentNode: [circular object HTMLDivElement] : &lt;div class=&quot;playButtonContainer with-curtain hide&quot;&gt;      &lt;button class=&quot;playSingle0 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle1 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle2 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle3 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle4 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle5 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle6 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle7 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle8 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;    &lt;/div&gt;,    part: [object DOMTokenList] { ... },    prefix: null,    prepend: function prepend() { [native code] },    previousElementSibling: null,    previousSibling: [object Text] { ... },    PROCESSING_INSTRUCTION_NODE: 7,    querySelector: function querySelector() { [native code] },    querySelectorAll: function querySelectorAll() { [native code] },    releasePointerCapture: function releasePointerCapture() { [native code] },    remove: function remove() { [native code] },    removeAttribute: function removeAttribute() { [native code] },    removeAttributeNode: function removeAttributeNode() { [native code] },    removeAttributeNS: function removeAttributeNS() { [native code] },    removeChild: function removeChild() { [native code] },    removeEventListener: function removeEventListener() { [native code] },    replaceChild: function replaceChild() { [native code] },    replaceChildren: function replaceChildren() { [native code] },    replaceWith: function replaceWith() { [native code] },    reportValidity: function reportValidity() { [native code] },    requestFullscreen: function requestFullscreen() { [native code] },    requestPointerLock: function requestPointerLock() { [native code] },    role: null,    scroll: function scroll() { [native code] },    scrollBy: function scrollBy() { [native code] },    scrollHeight: 0,    scrollIntoView: function scrollIntoView() { [native code] },    scrollIntoViewIfNeeded: function scrollIntoViewIfNeeded() { [native code] },    scrollLeft: 0,    scrollTo: function scrollTo() { [native code] },    scrollTop: 0,    scrollWidth: 0,    setAttribute: function setAttribute() { [native code] },    setAttributeNode: function setAttributeNode() { [native code] },    setAttributeNodeNS: function setAttributeNodeNS() { [native code] },    setAttributeNS: function setAttributeNS() { [native code] },    setCustomValidity: function setCustomValidity() { [native code] },    setHTML: function setHTML() { [native code] },    setPointerCapture: function setPointerCapture() { [native code] },    shadowRoot: null,    slot: "",    spellcheck: true,    style: [object CSSStyleDeclaration] { ... },    tabIndex: 0,    tagName: "BUTTON",    TEXT_NODE: 3,    textContent: "",    title: "",    toggleAttribute: function toggleAttribute() { [native code] },    translate: true,    type: "button",    validationMessage: "",    validity: [object ValidityState] { ... },    value: "",    virtualKeyboardPolicy: "",    webkitMatchesSelector: function webkitMatchesSelector() { [native code] },    webkitRequestFullScreen: function webkitRequestFullScreen() { [native code] },    webkitRequestFullscreen: function webkitRequestFullscreen() { [native code] },    willValidate: false  },  1: [circular object HTMLButtonElement] : &lt;button class=&quot;playSingle1 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;,  2: [object HTMLButtonElement] {    accessKey: "",    addEventListener: function addEventListener() { [native code] },    after: function after() { [native code] },    animate: function animate() { [native code] },    append: function append() { [native code] },    appendChild: function appendChild() { [native code] },    ariaAtomic: null,    ariaAutoComplete: null,    ariaBrailleLabel: null,    ariaBrailleRoleDescription: null,    ariaBusy: null,    ariaChecked: null,    ariaColCount: null,    ariaColIndex: null,    ariaColSpan: null,    ariaCurrent: null,    ariaDescription: null,    ariaDisabled: null,    ariaExpanded: null,    ariaHasPopup: null,    ariaHidden: null,    ariaInvalid: null,    ariaKeyShortcuts: null,    ariaLabel: null,    ariaLevel: null,    ariaLive: null,    ariaModal: null,    ariaMultiLine: null,    ariaMultiSelectable: null,    ariaOrientation: null,    ariaPlaceholder: null,    ariaPosInSet: null,    ariaPressed: null,    ariaReadOnly: null,    ariaRelevant: null,    ariaRequired: null,    ariaRoleDescription: null,    ariaRowCount: null,    ariaRowIndex: null,    ariaRowSpan: null,    ariaSelected: null,    ariaSetSize: null,    ariaSort: null,    ariaValueMax: null,    ariaValueMin: null,    ariaValueNow: null,    ariaValueText: null,    assignedSlot: null,    attachInternals: function attachInternals() { [native code] },    attachShadow: function attachShadow() { [native code] },    ATTRIBUTE_NODE: 2,    attributes: [object NamedNodeMap] { ... },    attributeStyleMap: [object StylePropertyMap] { ... },    autocapitalize: "",    autofocus: false,    baseURI: "https://fiddle.jshell.net/_display/?editor_console=true",    before: function before() { [native code] },    blur: function blur() { [native code] },    CDATA_SECTION_NODE: 4,    checkValidity: function checkValidity() { [native code] },    checkVisibility: function checkVisibility() { [native code] },    childElementCount: 0,    childNodes: [object NodeList] { ... },    children: [object HTMLCollection] { ... },    classList: [object DOMTokenList] { ... },    className: "playSingle2 cover",    click: function click() { [native code] },    clientHeight: 0,    clientLeft: 0,    clientTop: 0,    clientWidth: 0,    cloneNode: function cloneNode() { [native code] },    closest: function closest() { [native code] },    COMMENT_NODE: 8,    compareDocumentPosition: function compareDocumentPosition() { [native code] },    computedStyleMap: function computedStyleMap() { [native code] },    contains: function contains() { [native code] },    contentEditable: "inherit",    dataset: [object DOMStringMap] { ... },    dir: "",    disabled: false,    dispatchEvent: function dispatchEvent() { [native code] },    DOCUMENT_FRAGMENT_NODE: 11,    DOCUMENT_NODE: 9,    DOCUMENT_POSITION_CONTAINED_BY: 16,    DOCUMENT_POSITION_CONTAINS: 8,    DOCUMENT_POSITION_DISCONNECTED: 1,    DOCUMENT_POSITION_FOLLOWING: 4,    DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32,    DOCUMENT_POSITION_PRECEDING: 2,    DOCUMENT_TYPE_NODE: 10,    draggable: false,    ELEMENT_NODE: 1,    elementTiming: "",    enterKeyHint: "",    ENTITY_NODE: 6,    ENTITY_REFERENCE_NODE: 5,    firstChild: null,    firstElementChild: null,    focus: function focus() { [native code] },    form: null,    formAction: "https://fiddle.jshell.net/_display/?editor_console=true",    formEnctype: "",    formMethod: "",    formNoValidate: false,    formTarget: "",    getAnimations: function getAnimations() { [native code] },    getAttribute: function getAttribute() { [native code] },    getAttributeNames: function getAttributeNames() { [native code] },    getAttributeNode: function getAttributeNode() { [native code] },    getAttributeNodeNS: function getAttributeNodeNS() { [native code] },    getAttributeNS: function getAttributeNS() { [native code] },    getBoundingClientRect: function getBoundingClientRect() { [native code] },    getClientRects: function getClientRects() { [native code] },    getElementsByClassName: function getElementsByClassName() { [native code] },    getElementsByTagName: function getElementsByTagName() { [native code] },    getElementsByTagNameNS: function getElementsByTagNameNS() { [native code] },    getInnerHTML: function getInnerHTML() { [native code] },    getRootNode: function getRootNode() { [native code] },    hasAttribute: function hasAttribute() { [native code] },    hasAttributeNS: function hasAttributeNS() { [native code] },    hasAttributes: function hasAttributes() { [native code] },    hasChildNodes: function hasChildNodes() { [native code] },    hasPointerCapture: function hasPointerCapture() { [native code] },    hidden: false,    id: "",    inert: false,    innerHTML: "",    innerText: "",    inputMode: "",    insertAdjacentElement: function insertAdjacentElement() { [native code] },    insertAdjacentHTML: function insertAdjacentHTML() { [native code] },    insertAdjacentText: function insertAdjacentText() { [native code] },    insertBefore: function insertBefore() { [native code] },    isConnected: true,    isContentEditable: false,    isDefaultNamespace: function isDefaultNamespace() { [native code] },    isEqualNode: function isEqualNode() { [native code] },    isSameNode: function isSameNode() { [native code] },    labels: [object NodeList] { ... },    lang: "",    lastChild: null,    lastElementChild: null,    localName: "button",    lookupNamespaceURI: function lookupNamespaceURI() { [native code] },    lookupPrefix: function lookupPrefix() { [native code] },    matches: function matches() { [native code] },    name: "",    namespaceURI: "http://www.w3.org/1999/xhtml",    nextElementSibling: [object HTMLButtonElement] { ... },    nextSibling: [object Text] { ... },    nodeName: "BUTTON",    nodeType: 1,    nodeValue: null,    nonce: "",    normalize: function normalize() { [native code] },    NOTATION_NODE: 12,    offsetHeight: 0,    offsetLeft: 0,    offsetParent: null,    offsetTop: 0,    offsetWidth: 0,    onabort: null,    onanimationend: null,    onanimationiteration: null,    onanimationstart: null,    onauxclick: null,    onbeforecopy: null,    onbeforecut: null,    onbeforeinput: null,    onbeforematch: null,    onbeforepaste: null,    onbeforexrselect: null,    onblur: null,    oncancel: null,    oncanplay: null,    oncanplaythrough: null,    onchange: null,    onclick: null,    onclose: null,    oncontentvisibilityautostatechange: null,    oncontextlost: null,    oncontextmenu: null,    oncontextrestored: null,    oncopy: null,    oncuechange: null,    oncut: null,    ondblclick: null,    ondrag: null,    ondragend: null,    ondragenter: null,    ondragleave: null,    ondragover: null,    ondragstart: null,    ondrop: null,    ondurationchange: null,    onemptied: null,    onended: null,    onerror: null,    onfocus: null,    onformdata: null,    onfullscreenchange: null,    onfullscreenerror: null,    ongotpointercapture: null,    oninput: null,    oninvalid: null,    onkeydown: null,    onkeypress: null,    onkeyup: null,    onload: null,    onloadeddata: null,    onloadedmetadata: null,    onloadstart: null,    onlostpointercapture: null,    onmousedown: null,    onmouseenter: null,    onmouseleave: null,    onmousemove: null,    onmouseout: null,    onmouseover: null,    onmouseup: null,    onmousewheel: null,    onpaste: null,    onpause: null,    onplay: null,    onplaying: null,    onpointercancel: null,    onpointerdown: null,    onpointerenter: null,    onpointerleave: null,    onpointermove: null,    onpointerout: null,    onpointerover: null,    onpointerrawupdate: null,    onpointerup: null,    onprogress: null,    onratechange: null,    onreset: null,    onresize: null,    onscroll: null,    onsearch: null,    onsecuritypolicyviolation: null,    onseeked: null,    onseeking: null,    onselect: null,    onselectionchange: null,    onselectstart: null,    onslotchange: null,    onstalled: null,    onsubmit: null,    onsuspend: null,    ontimeupdate: null,    ontoggle: null,    ontransitioncancel: null,    ontransitionend: null,    ontransitionrun: null,    ontransitionstart: null,    onvolumechange: null,    onwaiting: null,    onwebkitanimationend: null,    onwebkitanimationiteration: null,    onwebkitanimationstart: null,    onwebkitfullscreenchange: null,    onwebkitfullscreenerror: null,    onwebkittransitionend: null,    onwheel: null,    outerHTML: "&lt;button class=\&quot;playSingle2 cover\&quot; type=\&quot;button\&quot; data-container=\&quot;play1\&quot; data-id=\&quot;M7lc1UVf-VE\&quot;&gt;&lt;/button&gt;",    outerText: "",    ownerDocument: [circular object HTMLDocument],    parentElement: [circular object HTMLDivElement] : &lt;div class=&quot;playButtonContainer with-curtain hide&quot;&gt;      &lt;button class=&quot;playSingle0 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle1 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle2 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle3 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle4 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle5 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle6 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle7 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle8 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;    &lt;/div&gt;,    parentNode: [circular object HTMLDivElement] : &lt;div class=&quot;playButtonContainer with-curtain hide&quot;&gt;      &lt;button class=&quot;playSingle0 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle1 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle2 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle3 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle4 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle5 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle6 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle7 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle8 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;    &lt;/div&gt;,    part: [object DOMTokenList] { ... },    prefix: null,    prepend: function prepend() { [native code] },    previousElementSibling: [circular object HTMLButtonElement] : &lt;button class=&quot;playSingle1 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;,    previousSibling: [object Text] { ... },    PROCESSING_INSTRUCTION_NODE: 7,    querySelector: function querySelector() { [native code] },    querySelectorAll: function querySelectorAll() { [native code] },    releasePointerCapture: function releasePointerCapture() { [native code] },    remove: function remove() { [native code] },    removeAttribute: function removeAttribute() { [native code] },    removeAttributeNode: function removeAttributeNode() { [native code] },    removeAttributeNS: function removeAttributeNS() { [native code] },    removeChild: function removeChild() { [native code] },    removeEventListener: function removeEventListener() { [native code] },    replaceChild: function replaceChild() { [native code] },    replaceChildren: function replaceChildren() { [native code] },    replaceWith: function replaceWith() { [native code] },    reportValidity: function reportValidity() { [native code] },    requestFullscreen: function requestFullscreen() { [native code] },    requestPointerLock: function requestPointerLock() { [native code] },    role: null,    scroll: function scroll() { [native code] },    scrollBy: function scrollBy() { [native code] },    scrollHeight: 0,    scrollIntoView: function scrollIntoView() { [native code] },    scrollIntoViewIfNeeded: function scrollIntoViewIfNeeded() { [native code] },    scrollLeft: 0,    scrollTo: function scrollTo() { [native code] },    scrollTop: 0,    scrollWidth: 0,    setAttribute: function setAttribute() { [native code] },    setAttributeNode: function setAttributeNode() { [native code] },    setAttributeNodeNS: function setAttributeNodeNS() { [native code] },    setAttributeNS: function setAttributeNS() { [native code] },    setCustomValidity: function setCustomValidity() { [native code] },    setHTML: function setHTML() { [native code] },    setPointerCapture: function setPointerCapture() { [native code] },    shadowRoot: null,    slot: "",    spellcheck: true,    style: [object CSSStyleDeclaration] { ... },    tabIndex: 0,    tagName: "BUTTON",    TEXT_NODE: 3,    textContent: "",    title: "",    toggleAttribute: function toggleAttribute() { [native code] },    translate: true,    type: "button",    validationMessage: "",    validity: [object ValidityState] { ... },    value: "",    virtualKeyboardPolicy: "",    webkitMatchesSelector: function webkitMatchesSelector() { [native code] },    webkitRequestFullScreen: function webkitRequestFullScreen() { [native code] },    webkitRequestFullscreen: function webkitRequestFullscreen() { [native code] },    willValidate: false  },  3: [circular object HTMLButtonElement] : &lt;button class=&quot;playSingle3 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;,  4: [object HTMLButtonElement] {    accessKey: "",    addEventListener: function addEventListener() { [native code] },    after: function after() { [native code] },    animate: function animate() { [native code] },    append: function append() { [native code] },    appendChild: function appendChild() { [native code] },    ariaAtomic: null,    ariaAutoComplete: null,    ariaBrailleLabel: null,    ariaBrailleRoleDescription: null,    ariaBusy: null,    ariaChecked: null,    ariaColCount: null,    ariaColIndex: null,    ariaColSpan: null,    ariaCurrent: null,    ariaDescription: null,    ariaDisabled: null,    ariaExpanded: null,    ariaHasPopup: null,    ariaHidden: null,    ariaInvalid: null,    ariaKeyShortcuts: null,    ariaLabel: null,    ariaLevel: null,    ariaLive: null,    ariaModal: null,    ariaMultiLine: null,    ariaMultiSelectable: null,    ariaOrientation: null,    ariaPlaceholder: null,    ariaPosInSet: null,    ariaPressed: null,    ariaReadOnly: null,    ariaRelevant: null,    ariaRequired: null,    ariaRoleDescription: null,    ariaRowCount: null,    ariaRowIndex: null,    ariaRowSpan: null,    ariaSelected: null,    ariaSetSize: null,    ariaSort: null,    ariaValueMax: null,    ariaValueMin: null,    ariaValueNow: null,    ariaValueText: null,    assignedSlot: null,    attachInternals: function attachInternals() { [native code] },    attachShadow: function attachShadow() { [native code] },    ATTRIBUTE_NODE: 2,    attributes: [object NamedNodeMap] { ... },    attributeStyleMap: [object StylePropertyMap] { ... },    autocapitalize: "",    autofocus: false,    baseURI: "https://fiddle.jshell.net/_display/?editor_console=true",    before: function before() { [native code] },    blur: function blur() { [native code] },    CDATA_SECTION_NODE: 4,    checkValidity: function checkValidity() { [native code] },    checkVisibility: function checkVisibility() { [native code] },    childElementCount: 0,    childNodes: [object NodeList] { ... },    children: [object HTMLCollection] { ... },    classList: [object DOMTokenList] { ... },    className: "playSingle4 cover",    click: function click() { [native code] },    clientHeight: 0,    clientLeft: 0,    clientTop: 0,    clientWidth: 0,    cloneNode: function cloneNode() { [native code] },    closest: function closest() { [native code] },    COMMENT_NODE: 8,    compareDocumentPosition: function compareDocumentPosition() { [native code] },    computedStyleMap: function computedStyleMap() { [native code] },    contains: function contains() { [native code] },    contentEditable: "inherit",    dataset: [object DOMStringMap] { ... },    dir: "",    disabled: false,    dispatchEvent: function dispatchEvent() { [native code] },    DOCUMENT_FRAGMENT_NODE: 11,    DOCUMENT_NODE: 9,    DOCUMENT_POSITION_CONTAINED_BY: 16,    DOCUMENT_POSITION_CONTAINS: 8,    DOCUMENT_POSITION_DISCONNECTED: 1,    DOCUMENT_POSITION_FOLLOWING: 4,    DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32,    DOCUMENT_POSITION_PRECEDING: 2,    DOCUMENT_TYPE_NODE: 10,    draggable: false,    ELEMENT_NODE: 1,    elementTiming: "",    enterKeyHint: "",    ENTITY_NODE: 6,    ENTITY_REFERENCE_NODE: 5,    firstChild: null,    firstElementChild: null,    focus: function focus() { [native code] },    form: null,    formAction: "https://fiddle.jshell.net/_display/?editor_console=true",    formEnctype: "",    formMethod: "",    formNoValidate: false,    formTarget: "",    getAnimations: function getAnimations() { [native code] },    getAttribute: function getAttribute() { [native code] },    getAttributeNames: function getAttributeNames() { [native code] },    getAttributeNode: function getAttributeNode() { [native code] },    getAttributeNodeNS: function getAttributeNodeNS() { [native code] },    getAttributeNS: function getAttributeNS() { [native code] },    getBoundingClientRect: function getBoundingClientRect() { [native code] },    getClientRects: function getClientRects() { [native code] },    getElementsByClassName: function getElementsByClassName() { [native code] },    getElementsByTagName: function getElementsByTagName() { [native code] },    getElementsByTagNameNS: function getElementsByTagNameNS() { [native code] },    getInnerHTML: function getInnerHTML() { [native code] },    getRootNode: function getRootNode() { [native code] },    hasAttribute: function hasAttribute() { [native code] },    hasAttributeNS: function hasAttributeNS() { [native code] },    hasAttributes: function hasAttributes() { [native code] },    hasChildNodes: function hasChildNodes() { [native code] },    hasPointerCapture: function hasPointerCapture() { [native code] },    hidden: false,    id: "",    inert: false,    innerHTML: "",    innerText: "",    inputMode: "",    insertAdjacentElement: function insertAdjacentElement() { [native code] },    insertAdjacentHTML: function insertAdjacentHTML() { [native code] },    insertAdjacentText: function insertAdjacentText() { [native code] },    insertBefore: function insertBefore() { [native code] },    isConnected: true,    isContentEditable: false,    isDefaultNamespace: function isDefaultNamespace() { [native code] },    isEqualNode: function isEqualNode() { [native code] },    isSameNode: function isSameNode() { [native code] },    labels: [object NodeList] { ... },    lang: "",    lastChild: null,    lastElementChild: null,    localName: "button",    lookupNamespaceURI: function lookupNamespaceURI() { [native code] },    lookupPrefix: function lookupPrefix() { [native code] },    matches: function matches() { [native code] },    name: "",    namespaceURI: "http://www.w3.org/1999/xhtml",    nextElementSibling: [object HTMLButtonElement] { ... },    nextSibling: [object Text] { ... },    nodeName: "BUTTON",    nodeType: 1,    nodeValue: null,    nonce: "",    normalize: function normalize() { [native code] },    NOTATION_NODE: 12,    offsetHeight: 0,    offsetLeft: 0,    offsetParent: null,    offsetTop: 0,    offsetWidth: 0,    onabort: null,    onanimationend: null,    onanimationiteration: null,    onanimationstart: null,    onauxclick: null,    onbeforecopy: null,    onbeforecut: null,    onbeforeinput: null,    onbeforematch: null,    onbeforepaste: null,    onbeforexrselect: null,    onblur: null,    oncancel: null,    oncanplay: null,    oncanplaythrough: null,    onchange: null,    onclick: null,    onclose: null,    oncontentvisibilityautostatechange: null,    oncontextlost: null,    oncontextmenu: null,    oncontextrestored: null,    oncopy: null,    oncuechange: null,    oncut: null,    ondblclick: null,    ondrag: null,    ondragend: null,    ondragenter: null,    ondragleave: null,    ondragover: null,    ondragstart: null,    ondrop: null,    ondurationchange: null,    onemptied: null,    onended: null,    onerror: null,    onfocus: null,    onformdata: null,    onfullscreenchange: null,    onfullscreenerror: null,    ongotpointercapture: null,    oninput: null,    oninvalid: null,    onkeydown: null,    onkeypress: null,    onkeyup: null,    onload: null,    onloadeddata: null,    onloadedmetadata: null,    onloadstart: null,    onlostpointercapture: null,    onmousedown: null,    onmouseenter: null,    onmouseleave: null,    onmousemove: null,    onmouseout: null,    onmouseover: null,    onmouseup: null,    onmousewheel: null,    onpaste: null,    onpause: null,    onplay: null,    onplaying: null,    onpointercancel: null,    onpointerdown: null,    onpointerenter: null,    onpointerleave: null,    onpointermove: null,    onpointerout: null,    onpointerover: null,    onpointerrawupdate: null,    onpointerup: null,    onprogress: null,    onratechange: null,    onreset: null,    onresize: null,    onscroll: null,    onsearch: null,    onsecuritypolicyviolation: null,    onseeked: null,    onseeking: null,    onselect: null,    onselectionchange: null,    onselectstart: null,    onslotchange: null,    onstalled: null,    onsubmit: null,    onsuspend: null,    ontimeupdate: null,    ontoggle: null,    ontransitioncancel: null,    ontransitionend: null,    ontransitionrun: null,    ontransitionstart: null,    onvolumechange: null,    onwaiting: null,    onwebkitanimationend: null,    onwebkitanimationiteration: null,    onwebkitanimationstart: null,    onwebkitfullscreenchange: null,    onwebkitfullscreenerror: null,    onwebkittransitionend: null,    onwheel: null,    outerHTML: "&lt;button class=\&quot;playSingle4 cover\&quot; type=\&quot;button\&quot; data-container=\&quot;play1\&quot; data-id=\&quot;M7lc1UVf-VE\&quot;&gt;&lt;/button&gt;",    outerText: "",    ownerDocument: [circular object HTMLDocument],    parentElement: [circular object HTMLDivElement] : &lt;div class=&quot;playButtonContainer with-curtain hide&quot;&gt;      &lt;button class=&quot;playSingle0 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle1 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle2 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle3 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle4 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle5 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle6 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle7 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle8 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;    &lt;/div&gt;,    parentNode: [circular object HTMLDivElement] : &lt;div class=&quot;playButtonContainer with-curtain hide&quot;&gt;      &lt;button class=&quot;playSingle0 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle1 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle2 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle3 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle4 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle5 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle6 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle7 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle8 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;    &lt;/div&gt;,    part: [object DOMTokenList] { ... },    prefix: null,    prepend: function prepend() { [native code] },    previousElementSibling: [circular object HTMLButtonElement] : &lt;button class=&quot;playSingle3 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;,    previousSibling: [object Text] { ... },    PROCESSING_INSTRUCTION_NODE: 7,    querySelector: function querySelector() { [native code] },    querySelectorAll: function querySelectorAll() { [native code] },    releasePointerCapture: function releasePointerCapture() { [native code] },    remove: function remove() { [native code] },    removeAttribute: function removeAttribute() { [native code] },    removeAttributeNode: function removeAttributeNode() { [native code] },    removeAttributeNS: function removeAttributeNS() { [native code] },    removeChild: function removeChild() { [native code] },    removeEventListener: function removeEventListener() { [native code] },    replaceChild: function replaceChild() { [native code] },    replaceChildren: function replaceChildren() { [native code] },    replaceWith: function replaceWith() { [native code] },    reportValidity: function reportValidity() { [native code] },    requestFullscreen: function requestFullscreen() { [native code] },    requestPointerLock: function requestPointerLock() { [native code] },    role: null,    scroll: function scroll() { [native code] },    scrollBy: function scrollBy() { [native code] },    scrollHeight: 0,    scrollIntoView: function scrollIntoView() { [native code] },    scrollIntoViewIfNeeded: function scrollIntoViewIfNeeded() { [native code] },    scrollLeft: 0,    scrollTo: function scrollTo() { [native code] },    scrollTop: 0,    scrollWidth: 0,    setAttribute: function setAttribute() { [native code] },    setAttributeNode: function setAttributeNode() { [native code] },    setAttributeNodeNS: function setAttributeNodeNS() { [native code] },    setAttributeNS: function setAttributeNS() { [native code] },    setCustomValidity: function setCustomValidity() { [native code] },    setHTML: function setHTML() { [native code] },    setPointerCapture: function setPointerCapture() { [native code] },    shadowRoot: null,    slot: "",    spellcheck: true,    style: [object CSSStyleDeclaration] { ... },    tabIndex: 0,    tagName: "BUTTON",    TEXT_NODE: 3,    textContent: "",    title: "",    toggleAttribute: function toggleAttribute() { [native code] },    translate: true,    type: "button",    validationMessage: "",    validity: [object ValidityState] { ... },    value: "",    virtualKeyboardPolicy: "",    webkitMatchesSelector: function webkitMatchesSelector() { [native code] },    webkitRequestFullScreen: function webkitRequestFullScreen() { [native code] },    webkitRequestFullscreen: function webkitRequestFullscreen() { [native code] },    willValidate: false  },  5: [circular object HTMLButtonElement] : &lt;button class=&quot;playSingle5 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;,  6: [object HTMLButtonElement] {    accessKey: "",    addEventListener: function addEventListener() { [native code] },    after: function after() { [native code] },    animate: function animate() { [native code] },    append: function append() { [native code] },    appendChild: function appendChild() { [native code] },    ariaAtomic: null,    ariaAutoComplete: null,    ariaBrailleLabel: null,    ariaBrailleRoleDescription: null,    ariaBusy: null,    ariaChecked: null,    ariaColCount: null,    ariaColIndex: null,    ariaColSpan: null,    ariaCurrent: null,    ariaDescription: null,    ariaDisabled: null,    ariaExpanded: null,    ariaHasPopup: null,    ariaHidden: null,    ariaInvalid: null,    ariaKeyShortcuts: null,    ariaLabel: null,    ariaLevel: null,    ariaLive: null,    ariaModal: null,    ariaMultiLine: null,    ariaMultiSelectable: null,    ariaOrientation: null,    ariaPlaceholder: null,    ariaPosInSet: null,    ariaPressed: null,    ariaReadOnly: null,    ariaRelevant: null,    ariaRequired: null,    ariaRoleDescription: null,    ariaRowCount: null,    ariaRowIndex: null,    ariaRowSpan: null,    ariaSelected: null,    ariaSetSize: null,    ariaSort: null,    ariaValueMax: null,    ariaValueMin: null,    ariaValueNow: null,    ariaValueText: null,    assignedSlot: null,    attachInternals: function attachInternals() { [native code] },    attachShadow: function attachShadow() { [native code] },    ATTRIBUTE_NODE: 2,    attributes: [object NamedNodeMap] { ... },    attributeStyleMap: [object StylePropertyMap] { ... },    autocapitalize: "",    autofocus: false,    baseURI: "https://fiddle.jshell.net/_display/?editor_console=true",    before: function before() { [native code] },    blur: function blur() { [native code] },    CDATA_SECTION_NODE: 4,    checkValidity: function checkValidity() { [native code] },    checkVisibility: function checkVisibility() { [native code] },    childElementCount: 0,    childNodes: [object NodeList] { ... },    children: [object HTMLCollection] { ... },    classList: [object DOMTokenList] { ... },    className: "playSingle6 cover",    click: function click() { [native code] },    clientHeight: 0,    clientLeft: 0,    clientTop: 0,    clientWidth: 0,    cloneNode: function cloneNode() { [native code] },    closest: function closest() { [native code] },    COMMENT_NODE: 8,    compareDocumentPosition: function compareDocumentPosition() { [native code] },    computedStyleMap: function computedStyleMap() { [native code] },    contains: function contains() { [native code] },    contentEditable: "inherit",    dataset: [object DOMStringMap] { ... },    dir: "",    disabled: false,    dispatchEvent: function dispatchEvent() { [native code] },    DOCUMENT_FRAGMENT_NODE: 11,    DOCUMENT_NODE: 9,    DOCUMENT_POSITION_CONTAINED_BY: 16,    DOCUMENT_POSITION_CONTAINS: 8,    DOCUMENT_POSITION_DISCONNECTED: 1,    DOCUMENT_POSITION_FOLLOWING: 4,    DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32,    DOCUMENT_POSITION_PRECEDING: 2,    DOCUMENT_TYPE_NODE: 10,    draggable: false,    ELEMENT_NODE: 1,    elementTiming: "",    enterKeyHint: "",    ENTITY_NODE: 6,    ENTITY_REFERENCE_NODE: 5,    firstChild: null,    firstElementChild: null,    focus: function focus() { [native code] },    form: null,    formAction: "https://fiddle.jshell.net/_display/?editor_console=true",    formEnctype: "",    formMethod: "",    formNoValidate: false,    formTarget: "",    getAnimations: function getAnimations() { [native code] },    getAttribute: function getAttribute() { [native code] },    getAttributeNames: function getAttributeNames() { [native code] },    getAttributeNode: function getAttributeNode() { [native code] },    getAttributeNodeNS: function getAttributeNodeNS() { [native code] },    getAttributeNS: function getAttributeNS() { [native code] },    getBoundingClientRect: function getBoundingClientRect() { [native code] },    getClientRects: function getClientRects() { [native code] },    getElementsByClassName: function getElementsByClassName() { [native code] },    getElementsByTagName: function getElementsByTagName() { [native code] },    getElementsByTagNameNS: function getElementsByTagNameNS() { [native code] },    getInnerHTML: function getInnerHTML() { [native code] },    getRootNode: function getRootNode() { [native code] },    hasAttribute: function hasAttribute() { [native code] },    hasAttributeNS: function hasAttributeNS() { [native code] },    hasAttributes: function hasAttributes() { [native code] },    hasChildNodes: function hasChildNodes() { [native code] },    hasPointerCapture: function hasPointerCapture() { [native code] },    hidden: false,    id: "",    inert: false,    innerHTML: "",    innerText: "",    inputMode: "",    insertAdjacentElement: function insertAdjacentElement() { [native code] },    insertAdjacentHTML: function insertAdjacentHTML() { [native code] },    insertAdjacentText: function insertAdjacentText() { [native code] },    insertBefore: function insertBefore() { [native code] },    isConnected: true,    isContentEditable: false,    isDefaultNamespace: function isDefaultNamespace() { [native code] },    isEqualNode: function isEqualNode() { [native code] },    isSameNode: function isSameNode() { [native code] },    labels: [object NodeList] { ... },    lang: "",    lastChild: null,    lastElementChild: null,    localName: "button",    lookupNamespaceURI: function lookupNamespaceURI() { [native code] },    lookupPrefix: function lookupPrefix() { [native code] },    matches: function matches() { [native code] },    name: "",    namespaceURI: "http://www.w3.org/1999/xhtml",    nextElementSibling: [object HTMLButtonElement] { ... },    nextSibling: [object Text] { ... },    nodeName: "BUTTON",    nodeType: 1,    nodeValue: null,    nonce: "",    normalize: function normalize() { [native code] },    NOTATION_NODE: 12,    offsetHeight: 0,    offsetLeft: 0,    offsetParent: null,    offsetTop: 0,    offsetWidth: 0,    onabort: null,    onanimationend: null,    onanimationiteration: null,    onanimationstart: null,    onauxclick: null,    onbeforecopy: null,    onbeforecut: null,    onbeforeinput: null,    onbeforematch: null,    onbeforepaste: null,    onbeforexrselect: null,    onblur: null,    oncancel: null,    oncanplay: null,    oncanplaythrough: null,    onchange: null,    onclick: null,    onclose: null,    oncontentvisibilityautostatechange: null,    oncontextlost: null,    oncontextmenu: null,    oncontextrestored: null,    oncopy: null,    oncuechange: null,    oncut: null,    ondblclick: null,    ondrag: null,    ondragend: null,    ondragenter: null,    ondragleave: null,    ondragover: null,    ondragstart: null,    ondrop: null,    ondurationchange: null,    onemptied: null,    onended: null,    onerror: null,    onfocus: null,    onformdata: null,    onfullscreenchange: null,    onfullscreenerror: null,    ongotpointercapture: null,    oninput: null,    oninvalid: null,    onkeydown: null,    onkeypress: null,    onkeyup: null,    onload: null,    onloadeddata: null,    onloadedmetadata: null,    onloadstart: null,    onlostpointercapture: null,    onmousedown: null,    onmouseenter: null,    onmouseleave: null,    onmousemove: null,    onmouseout: null,    onmouseover: null,    onmouseup: null,    onmousewheel: null,    onpaste: null,    onpause: null,    onplay: null,    onplaying: null,    onpointercancel: null,    onpointerdown: null,    onpointerenter: null,    onpointerleave: null,    onpointermove: null,    onpointerout: null,    onpointerover: null,    onpointerrawupdate: null,    onpointerup: null,    onprogress: null,    onratechange: null,    onreset: null,    onresize: null,    onscroll: null,    onsearch: null,    onsecuritypolicyviolation: null,    onseeked: null,    onseeking: null,    onselect: null,    onselectionchange: null,    onselectstart: null,    onslotchange: null,    onstalled: null,    onsubmit: null,    onsuspend: null,    ontimeupdate: null,    ontoggle: null,    ontransitioncancel: null,    ontransitionend: null,    ontransitionrun: null,    ontransitionstart: null,    onvolumechange: null,    onwaiting: null,    onwebkitanimationend: null,    onwebkitanimationiteration: null,    onwebkitanimationstart: null,    onwebkitfullscreenchange: null,    onwebkitfullscreenerror: null,    onwebkittransitionend: null,    onwheel: null,    outerHTML: "&lt;button class=\&quot;playSingle6 cover\&quot; type=\&quot;button\&quot; data-container=\&quot;play1\&quot; data-id=\&quot;M7lc1UVf-VE\&quot;&gt;&lt;/button&gt;",    outerText: "",    ownerDocument: [circular object HTMLDocument],    parentElement: [circular object HTMLDivElement] : &lt;div class=&quot;playButtonContainer with-curtain hide&quot;&gt;      &lt;button class=&quot;playSingle0 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle1 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle2 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle3 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle4 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle5 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle6 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle7 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle8 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;    &lt;/div&gt;,    parentNode: [circular object HTMLDivElement] : &lt;div class=&quot;playButtonContainer with-curtain hide&quot;&gt;      &lt;button class=&quot;playSingle0 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle1 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle2 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle3 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle4 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle5 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle6 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle7 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle8 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;    &lt;/div&gt;,    part: [object DOMTokenList] { ... },    prefix: null,    prepend: function prepend() { [native code] },    previousElementSibling: [circular object HTMLButtonElement] : &lt;button class=&quot;playSingle5 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;,    previousSibling: [object Text] { ... },    PROCESSING_INSTRUCTION_NODE: 7,    querySelector: function querySelector() { [native code] },    querySelectorAll: function querySelectorAll() { [native code] },    releasePointerCapture: function releasePointerCapture() { [native code] },    remove: function remove() { [native code] },    removeAttribute: function removeAttribute() { [native code] },    removeAttributeNode: function removeAttributeNode() { [native code] },    removeAttributeNS: function removeAttributeNS() { [native code] },    removeChild: function removeChild() { [native code] },    removeEventListener: function removeEventListener() { [native code] },    replaceChild: function replaceChild() { [native code] },    replaceChildren: function replaceChildren() { [native code] },    replaceWith: function replaceWith() { [native code] },    reportValidity: function reportValidity() { [native code] },    requestFullscreen: function requestFullscreen() { [native code] },    requestPointerLock: function requestPointerLock() { [native code] },    role: null,    scroll: function scroll() { [native code] },    scrollBy: function scrollBy() { [native code] },    scrollHeight: 0,    scrollIntoView: function scrollIntoView() { [native code] },    scrollIntoViewIfNeeded: function scrollIntoViewIfNeeded() { [native code] },    scrollLeft: 0,    scrollTo: function scrollTo() { [native code] },    scrollTop: 0,    scrollWidth: 0,    setAttribute: function setAttribute() { [native code] },    setAttributeNode: function setAttributeNode() { [native code] },    setAttributeNodeNS: function setAttributeNodeNS() { [native code] },    setAttributeNS: function setAttributeNS() { [native code] },    setCustomValidity: function setCustomValidity() { [native code] },    setHTML: function setHTML() { [native code] },    setPointerCapture: function setPointerCapture() { [native code] },    shadowRoot: null,    slot: "",    spellcheck: true,    style: [object CSSStyleDeclaration] { ... },    tabIndex: 0,    tagName: "BUTTON",    TEXT_NODE: 3,    textContent: "",    title: "",    toggleAttribute: function toggleAttribute() { [native code] },    translate: true,    type: "button",    validationMessage: "",    validity: [object ValidityState] { ... },    value: "",    virtualKeyboardPolicy: "",    webkitMatchesSelector: function webkitMatchesSelector() { [native code] },    webkitRequestFullScreen: function webkitRequestFullScreen() { [native code] },    webkitRequestFullscreen: function webkitRequestFullscreen() { [native code] },    willValidate: false  },  7: [circular object HTMLButtonElement] : &lt;button class=&quot;playSingle7 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot;&gt;&lt;/button&gt;,  8: [object HTMLButtonElement] {    accessKey: "",    addEventListener: function addEventListener() { [native code] },    after: function after() { [native code] },    animate: function animate() { [native code] },    append: function append() { [native code] },    appendChild: function appendChild() { [native code] },    ariaAtomic: null,    ariaAutoComplete: null,    ariaBrailleLabel: null,    ariaBrailleRoleDescription: null,    ariaBusy: null,    ariaChecked: null,    ariaColCount: null,    ariaColIndex: null,    ariaColSpan: null,    ariaCurrent: null,    ariaDescription: null,    ariaDisabled: null,    ariaExpanded: null,    ariaHasPopup: null,    ariaHidden: null,    ariaInvalid: null,    ariaKeyShortcuts: null,    ariaLabel: null,    ariaLevel: null,    ariaLive: null,    ariaModal: null,    ariaMultiLine: null,    ariaMultiSelectable: null,    ariaOrientation: null,    ariaPlaceholder: null,    ariaPosInSet: null,    ariaPressed: null,    ariaReadOnly: null,    ariaRelevant: null,    ariaRequired: null,    ariaRoleDescription: null,    ariaRowCount: null,    ariaRowIndex: null,    ariaRowSpan: null,    ariaSelected: null,    ariaSetSize: null,    ariaSort: null,    ariaValueMax: null,    ariaValueMin: null,    ariaValueNow: null,    ariaValueText: null,    assignedSlot: null,    attachInternals: function attachInternals() { [native code] },    attachShadow: function attachShadow() { [native code] },    ATTRIBUTE_NODE: 2,    attributes: [object NamedNodeMap] { ... },    attributeStyleMap: [object StylePropertyMap] { ... },    autocapitalize: "",    autofocus: false,    baseURI: "https://fiddle.jshell.net/_display/?editor_console=true",    before: function before() { [native code] },    blur: function blur() { [native code] },    CDATA_SECTION_NODE: 4,    checkValidity: function checkValidity() { [native code] },    checkVisibility: function checkVisibility() { [native code] },    childElementCount: 0,    childNodes: [object NodeList] { ... },    children: [object HTMLCollection] { ... },    classList: [object DOMTokenList] { ... },    className: "playSingle8 cover",    click: function click() { [native code] },    clientHeight: 0,    clientLeft: 0,    clientTop: 0,    clientWidth: 0,    cloneNode: function cloneNode() { [native code] },    closest: function closest() { [native code] },    COMMENT_NODE: 8,    compareDocumentPosition: function compareDocumentPosition() { [native code] },    computedStyleMap: function computedStyleMap() { [native code] },    contains: function contains() { [native code] },    contentEditable: "inherit",    dataset: [object DOMStringMap] { ... },    dir: "",    disabled: false,    dispatchEvent: function dispatchEvent() { [native code] },    DOCUMENT_FRAGMENT_NODE: 11,    DOCUMENT_NODE: 9,    DOCUMENT_POSITION_CONTAINED_BY: 16,    DOCUMENT_POSITION_CONTAINS: 8,    DOCUMENT_POSITION_DISCONNECTED: 1,    DOCUMENT_POSITION_FOLLOWING: 4,    DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32,    DOCUMENT_POSITION_PRECEDING: 2,    DOCUMENT_TYPE_NODE: 10,    draggable: false,    ELEMENT_NODE: 1,    elementTiming: "",    enterKeyHint: "",    ENTITY_NODE: 6,    ENTITY_REFERENCE_NODE: 5,    firstChild: null,    firstElementChild: null,    focus: function focus() { [native code] },    form: null,    formAction: "https://fiddle.jshell.net/_display/?editor_console=true",    formEnctype: "",    formMethod: "",    formNoValidate: false,    formTarget: "",    getAnimations: function getAnimations() { [native code] },    getAttribute: function getAttribute() { [native code] },    getAttributeNames: function getAttributeNames() { [native code] },    getAttributeNode: function getAttributeNode() { [native code] },    getAttributeNodeNS: function getAttributeNodeNS() { [native code] },    getAttributeNS: function getAttributeNS() { [native code] },    getBoundingClientRect: function getBoundingClientRect() { [native code] },    getClientRects: function getClientRects() { [native code] },    getElementsByClassName: function getElementsByClassName() { [native code] },    getElementsByTagName: function getElementsByTagName() { [native code] },    getElementsByTagNameNS: function getElementsByTagNameNS() { [native code] },    getInnerHTML: function getInnerHTML() { [native code] },    getRootNode: function getRootNode() { [native code] },    hasAttribute: function hasAttribute() { [native code] },    hasAttributeNS: function hasAttributeNS() { [native code] },    hasAttributes: function hasAttributes() { [native code] },    hasChildNodes: function hasChildNodes() { [native code] },    hasPointerCapture: function hasPointerCapture() { [native code] },    hidden: false,    id: "",    inert: false,    innerHTML: "",    innerText: "",    inputMode: "",    insertAdjacentElement: function insertAdjacentElement() { [native code] },    insertAdjacentHTML: function insertAdjacentHTML() { [native code] },    insertAdjacentText: function insertAdjacentText() { [native code] },    insertBefore: function insertBefore() { [native code] },    isConnected: true,    isContentEditable: false,    isDefaultNamespace: function isDefaultNamespace() { [native code] },    isEqualNode: function isEqualNode() { [native code] },    isSameNode: function isSameNode() { [native code] },    labels: [object NodeList] { ... },    lang: "",    lastChild: null,    lastElementChild: null,    localName: "button",    lookupNamespaceURI: function lookupNamespaceURI() { [native code] },    lookupPrefix: function lookupPrefix() { [native code] },    matches: function matches() { [native code] },    name: "",    namespaceURI: "http://www.w3.org/1999/xhtml",    nextElementSibling: null,    nextSibling: [object Text] { ... },    nodeName: "BUTTON",    nodeType: 1,    nodeValue: null,    nonce: "",    normalize: function normalize() { [native code] },    NOTATION_NODE: 12,    offsetHeight: 0,    offsetLeft: 0,    offsetParent: null,    offsetTop: 0,    offsetWidth: 0,    onabort: null,    onanimationend: null,    onanimationiteration: null,    onanimationstart: null,    onauxclick: null,    onbeforecopy: null,    onbeforecut: null,    onbeforeinput: null,    onbeforematch: null,    onbeforepaste: null,    onbeforexrselect: null,    onblur: null,    oncancel: null,    oncanplay: null,    oncanplaythrough: null,    onchange: null,    onclick: null,    onclose: null,    oncontentvisibilityautostatechange: null,    oncontextlost: null,    oncontextmenu: null,    oncontextrestored: null,    oncopy: null,    oncuechange: null,    oncut: null,    ondblclick: null,    ondrag: null,    ondragend: null,    ondragenter: null,    ondragleave: null,    ondragover: null,    ondragstart: null,    ondrop: null,    ondurationchange: null,    onemptied: null,    onended: null,    onerror: null,    onfocus: null,    onformdata: null,    onfullscreenchange: null,    onfullscreenerror: null,    ongotpointercapture: null,    oninput: null,    oninvalid: null,    onkeydown: null,    onkeypress: null,    onkeyup: null,    onload: null,    onloadeddata: null,    onloadedmetadata: null,    onloadstart: null,    onlostpointercapture: null,    onmousedown: null,    onmouseenter: null,    onmouseleave: null,    onmousemove: null,    onmouseout: null,    onmouseover: null,    onmouseup: null,    onmousewheel: null,    onpaste: null,    onpause: null,    onplay: null,    onplaying: null,    onpointercancel: null,    onpointerdown: null,    onpointerenter: null,    onpointerleave: null,    onpointermove: null,    onpointerout: null,    onpointerover: null,    onpointerrawupdate: null,    onpointerup: null,    onprogress: null,    onratechange: null,    onreset: null,    onresize: null,    onscroll: null,    onsearch: null,    onsecuritypolicyviolation: null,    onseeked: null,    onseeking: null,    onselect: null,    onselectionchange: null,    onselectstart: null,    onslotchange: null,    onstalled: null,    onsubmit: null,    onsuspend: null,    ontimeupdate: null,    ontoggle: null,    ontransitioncancel: null,    ontransitionend: null,    ontransitionrun: null,    ontransitionstart: null,    onvolumechange: null,    onwaiting: null,    onwebkitanimationend: null,    onwebkitanimationiteration: null,    onwebkitanimationstart: null,    onwebkitfullscreenchange: null,    onwebkitfullscreenerror: null,    onwebkittransitionend: null,    onwheel: null,    outerHTML: "&lt;button class=\&quot;playSingle8 cover\&quot; type=\&quot;button\&quot; data-container=\&quot;play1\&quot; data-id=\&quot;M7lc1UVf-VE\&quot;&gt;&lt;/button&gt;",    outerText: "",    ownerDocument: [circular object HTMLDocument],    parentElement: [circular object HTMLDivElement] : &lt;div class=&quot;playButtonContainer with-curtain hide&quot;&gt;      &lt;button class=&quot;playSingle0 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle1 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle2 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle3 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle4 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle5 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle6 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle7 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle8 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;    &lt;/div&gt;,    parentNode: [circular object HTMLDivElement] : &lt;div class=&quot;playButtonContainer with-curtain hide&quot;&gt;      &lt;button class=&quot;playSingle0 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle1 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle2 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle3 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle4 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle5 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle6 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle7 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle8 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;    &lt;/div&gt;,    part: [object DOMTokenList] { ... },    prefix: null,    prepend: function prepend() { [native code] },    previousElementSibling: [circular object HTMLButtonElement] : &lt;button class=&quot;playSingle7 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot;&gt;&lt;/button&gt;,    previousSibling: [object Text] { ... },    PROCESSING_INSTRUCTION_NODE: 7,    querySelector: function querySelector() { [native code] },    querySelectorAll: function querySelectorAll() { [native code] },    releasePointerCapture: function releasePointerCapture() { [native code] },    remove: function remove() { [native code] },    removeAttribute: function removeAttribute() { [native code] },    removeAttributeNode: function removeAttributeNode() { [native code] },    removeAttributeNS: function removeAttributeNS() { [native code] },    removeChild: function removeChild() { [native code] },    removeEventListener: function removeEventListener() { [native code] },    replaceChild: function replaceChild() { [native code] },    replaceChildren: function replaceChildren() { [native code] },    replaceWith: function replaceWith() { [native code] },    reportValidity: function reportValidity() { [native code] },    requestFullscreen: function requestFullscreen() { [native code] },    requestPointerLock: function requestPointerLock() { [native code] },    role: null,    scroll: function scroll() { [native code] },    scrollBy: function scrollBy() { [native code] },    scrollHeight: 0,    scrollIntoView: function scrollIntoView() { [native code] },    scrollIntoViewIfNeeded: function scrollIntoViewIfNeeded() { [native code] },    scrollLeft: 0,    scrollTo: function scrollTo() { [native code] },    scrollTop: 0,    scrollWidth: 0,    setAttribute: function setAttribute() { [native code] },    setAttributeNode: function setAttributeNode() { [native code] },    setAttributeNodeNS: function setAttributeNodeNS() { [native code] },    setAttributeNS: function setAttributeNS() { [native code] },    setCustomValidity: function setCustomValidity() { [native code] },    setHTML: function setHTML() { [native code] },    setPointerCapture: function setPointerCapture() { [native code] },    shadowRoot: null,    slot: "",    spellcheck: true,    style: [object CSSStyleDeclaration] { ... },    tabIndex: 0,    tagName: "BUTTON",    TEXT_NODE: 3,    textContent: "",    title: "",    toggleAttribute: function toggleAttribute() { [native code] },    translate: true,    type: "button",    validationMessage: "",    validity: [object ValidityState] { ... },    value: "",    virtualKeyboardPolicy: "",    webkitMatchesSelector: function webkitMatchesSelector() { [native code] },    webkitRequestFullScreen: function webkitRequestFullScreen() { [native code] },    webkitRequestFullscreen: function webkitRequestFullscreen() { [native code] },    willValidate: false  },  entries: function entries() { [native code] },  forEach: function forEach() { [native code] },  item: function item() { [native code] },  keys: function keys() { [native code] },  length: 9,  values: function values() { [native code] } }
 
Way too much to screenshot.

The results: Edit fiddle - JSFiddle - Code Playground
  • Code:
    [object NodeList] {  0: [object HTMLButtonElement] {    accessKey: "",    addEventListener: function addEventListener() { [native code] },    after: function after() { [native code] },    animate: function animate() { [native code] },    append: function append() { [native code] },    appendChild: function appendChild() { [native code] },    ariaAtomic: null,    ariaAutoComplete: null,    ariaBrailleLabel: null,    ariaBrailleRoleDescription: null,    ariaBusy: null,    ariaChecked: null,    ariaColCount: null,    ariaColIndex: null,    ariaColSpan: null,    ariaCurrent: null,    ariaDescription: null,    ariaDisabled: null,    ariaExpanded: null,    ariaHasPopup: null,    ariaHidden: null,    ariaInvalid: null,    ariaKeyShortcuts: null,    ariaLabel: null,    ariaLevel: null,    ariaLive: null,    ariaModal: null,    ariaMultiLine: null,    ariaMultiSelectable: null,    ariaOrientation: null,    ariaPlaceholder: null,    ariaPosInSet: null,    ariaPressed: null,    ariaReadOnly: null,    ariaRelevant: null,    ariaRequired: null,    ariaRoleDescription: null,    ariaRowCount: null,    ariaRowIndex: null,    ariaRowSpan: null,    ariaSelected: null,    ariaSetSize: null,    ariaSort: null,    ariaValueMax: null,    ariaValueMin: null,    ariaValueNow: null,    ariaValueText: null,    assignedSlot: null,    attachInternals: function attachInternals() { [native code] },    attachShadow: function attachShadow() { [native code] },    ATTRIBUTE_NODE: 2,    attributes: [object NamedNodeMap] { ... },    attributeStyleMap: [object StylePropertyMap] { ... },    autocapitalize: "",    autofocus: false,    baseURI: "https://fiddle.jshell.net/_display/?editor_console=true",    before: function before() { [native code] },    blur: function blur() { [native code] },    CDATA_SECTION_NODE: 4,    checkValidity: function checkValidity() { [native code] },    checkVisibility: function checkVisibility() { [native code] },    childElementCount: 0,    childNodes: [object NodeList] { ... },    children: [object HTMLCollection] { ... },    classList: [object DOMTokenList] { ... },    className: "playSingle0 cover",    click: function click() { [native code] },    clientHeight: 0,    clientLeft: 0,    clientTop: 0,    clientWidth: 0,    cloneNode: function cloneNode() { [native code] },    closest: function closest() { [native code] },    COMMENT_NODE: 8,    compareDocumentPosition: function compareDocumentPosition() { [native code] },    computedStyleMap: function computedStyleMap() { [native code] },    contains: function contains() { [native code] },    contentEditable: "inherit",    dataset: [object DOMStringMap] { ... },    dir: "",    disabled: false,    dispatchEvent: function dispatchEvent() { [native code] },    DOCUMENT_FRAGMENT_NODE: 11,    DOCUMENT_NODE: 9,    DOCUMENT_POSITION_CONTAINED_BY: 16,    DOCUMENT_POSITION_CONTAINS: 8,    DOCUMENT_POSITION_DISCONNECTED: 1,    DOCUMENT_POSITION_FOLLOWING: 4,    DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32,    DOCUMENT_POSITION_PRECEDING: 2,    DOCUMENT_TYPE_NODE: 10,    draggable: false,    ELEMENT_NODE: 1,    elementTiming: "",    enterKeyHint: "",    ENTITY_NODE: 6,    ENTITY_REFERENCE_NODE: 5,    firstChild: null,    firstElementChild: null,    focus: function focus() { [native code] },    form: null,    formAction: "https://fiddle.jshell.net/_display/?editor_console=true",    formEnctype: "",    formMethod: "",    formNoValidate: false,    formTarget: "",    getAnimations: function getAnimations() { [native code] },    getAttribute: function getAttribute() { [native code] },    getAttributeNames: function getAttributeNames() { [native code] },    getAttributeNode: function getAttributeNode() { [native code] },    getAttributeNodeNS: function getAttributeNodeNS() { [native code] },    getAttributeNS: function getAttributeNS() { [native code] },    getBoundingClientRect: function getBoundingClientRect() { [native code] },    getClientRects: function getClientRects() { [native code] },    getElementsByClassName: function getElementsByClassName() { [native code] },    getElementsByTagName: function getElementsByTagName() { [native code] },    getElementsByTagNameNS: function getElementsByTagNameNS() { [native code] },    getInnerHTML: function getInnerHTML() { [native code] },    getRootNode: function getRootNode() { [native code] },    hasAttribute: function hasAttribute() { [native code] },    hasAttributeNS: function hasAttributeNS() { [native code] },    hasAttributes: function hasAttributes() { [native code] },    hasChildNodes: function hasChildNodes() { [native code] },    hasPointerCapture: function hasPointerCapture() { [native code] },    hidden: false,    id: "",    inert: false,    innerHTML: "",    innerText: "",    inputMode: "",    insertAdjacentElement: function insertAdjacentElement() { [native code] },    insertAdjacentHTML: function insertAdjacentHTML() { [native code] },    insertAdjacentText: function insertAdjacentText() { [native code] },    insertBefore: function insertBefore() { [native code] },    isConnected: true,    isContentEditable: false,    isDefaultNamespace: function isDefaultNamespace() { [native code] },    isEqualNode: function isEqualNode() { [native code] },    isSameNode: function isSameNode() { [native code] },    labels: [object NodeList] { ... },    lang: "",    lastChild: null,    lastElementChild: null,    localName: "button",    lookupNamespaceURI: function lookupNamespaceURI() { [native code] },    lookupPrefix: function lookupPrefix() { [native code] },    matches: function matches() { [native code] },    name: "",    namespaceURI: "http://www.w3.org/1999/xhtml",    nextElementSibling: [object HTMLButtonElement] { ... },    nextSibling: [object Text] { ... },    nodeName: "BUTTON",    nodeType: 1,    nodeValue: null,    nonce: "",    normalize: function normalize() { [native code] },    NOTATION_NODE: 12,    offsetHeight: 0,    offsetLeft: 0,    offsetParent: null,    offsetTop: 0,    offsetWidth: 0,    onabort: null,    onanimationend: null,    onanimationiteration: null,    onanimationstart: null,    onauxclick: null,    onbeforecopy: null,    onbeforecut: null,    onbeforeinput: null,    onbeforematch: null,    onbeforepaste: null,    onbeforexrselect: null,    onblur: null,    oncancel: null,    oncanplay: null,    oncanplaythrough: null,    onchange: null,    onclick: null,    onclose: null,    oncontentvisibilityautostatechange: null,    oncontextlost: null,    oncontextmenu: null,    oncontextrestored: null,    oncopy: null,    oncuechange: null,    oncut: null,    ondblclick: null,    ondrag: null,    ondragend: null,    ondragenter: null,    ondragleave: null,    ondragover: null,    ondragstart: null,    ondrop: null,    ondurationchange: null,    onemptied: null,    onended: null,    onerror: null,    onfocus: null,    onformdata: null,    onfullscreenchange: null,    onfullscreenerror: null,    ongotpointercapture: null,    oninput: null,    oninvalid: null,    onkeydown: null,    onkeypress: null,    onkeyup: null,    onload: null,    onloadeddata: null,    onloadedmetadata: null,    onloadstart: null,    onlostpointercapture: null,    onmousedown: null,    onmouseenter: null,    onmouseleave: null,    onmousemove: null,    onmouseout: null,    onmouseover: null,    onmouseup: null,    onmousewheel: null,    onpaste: null,    onpause: null,    onplay: null,    onplaying: null,    onpointercancel: null,    onpointerdown: null,    onpointerenter: null,    onpointerleave: null,    onpointermove: null,    onpointerout: null,    onpointerover: null,    onpointerrawupdate: null,    onpointerup: null,    onprogress: null,    onratechange: null,    onreset: null,    onresize: null,    onscroll: null,    onsearch: null,    onsecuritypolicyviolation: null,    onseeked: null,    onseeking: null,    onselect: null,    onselectionchange: null,    onselectstart: null,    onslotchange: null,    onstalled: null,    onsubmit: null,    onsuspend: null,    ontimeupdate: null,    ontoggle: null,    ontransitioncancel: null,    ontransitionend: null,    ontransitionrun: null,    ontransitionstart: null,    onvolumechange: null,    onwaiting: null,    onwebkitanimationend: null,    onwebkitanimationiteration: null,    onwebkitanimationstart: null,    onwebkitfullscreenchange: null,    onwebkitfullscreenerror: null,    onwebkittransitionend: null,    onwheel: null,    outerHTML: "&lt;button class=\&quot;playSingle0 cover\&quot; type=\&quot;button\&quot; data-container=\&quot;play1\&quot; data-id=\&quot;M7lc1UVf-VE\&quot;&gt;&lt;/button&gt;",    outerText: "",    ownerDocument: [object HTMLDocument] { ... },    parentElement: [object HTMLDivElement] { ... },    parentNode: [circular object HTMLDivElement] : &lt;div class=&quot;playButtonContainer with-curtain hide&quot;&gt;      &lt;button class=&quot;playSingle0 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle1 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle2 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle3 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle4 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle5 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle6 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle7 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle8 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;    &lt;/div&gt;,    part: [object DOMTokenList] { ... },    prefix: null,    prepend: function prepend() { [native code] },    previousElementSibling: null,    previousSibling: [object Text] { ... },    PROCESSING_INSTRUCTION_NODE: 7,    querySelector: function querySelector() { [native code] },    querySelectorAll: function querySelectorAll() { [native code] },    releasePointerCapture: function releasePointerCapture() { [native code] },    remove: function remove() { [native code] },    removeAttribute: function removeAttribute() { [native code] },    removeAttributeNode: function removeAttributeNode() { [native code] },    removeAttributeNS: function removeAttributeNS() { [native code] },    removeChild: function removeChild() { [native code] },    removeEventListener: function removeEventListener() { [native code] },    replaceChild: function replaceChild() { [native code] },    replaceChildren: function replaceChildren() { [native code] },    replaceWith: function replaceWith() { [native code] },    reportValidity: function reportValidity() { [native code] },    requestFullscreen: function requestFullscreen() { [native code] },    requestPointerLock: function requestPointerLock() { [native code] },    role: null,    scroll: function scroll() { [native code] },    scrollBy: function scrollBy() { [native code] },    scrollHeight: 0,    scrollIntoView: function scrollIntoView() { [native code] },    scrollIntoViewIfNeeded: function scrollIntoViewIfNeeded() { [native code] },    scrollLeft: 0,    scrollTo: function scrollTo() { [native code] },    scrollTop: 0,    scrollWidth: 0,    setAttribute: function setAttribute() { [native code] },    setAttributeNode: function setAttributeNode() { [native code] },    setAttributeNodeNS: function setAttributeNodeNS() { [native code] },    setAttributeNS: function setAttributeNS() { [native code] },    setCustomValidity: function setCustomValidity() { [native code] },    setHTML: function setHTML() { [native code] },    setPointerCapture: function setPointerCapture() { [native code] },    shadowRoot: null,    slot: "",    spellcheck: true,    style: [object CSSStyleDeclaration] { ... },    tabIndex: 0,    tagName: "BUTTON",    TEXT_NODE: 3,    textContent: "",    title: "",    toggleAttribute: function toggleAttribute() { [native code] },    translate: true,    type: "button",    validationMessage: "",    validity: [object ValidityState] { ... },    value: "",    virtualKeyboardPolicy: "",    webkitMatchesSelector: function webkitMatchesSelector() { [native code] },    webkitRequestFullScreen: function webkitRequestFullScreen() { [native code] },    webkitRequestFullscreen: function webkitRequestFullscreen() { [native code] },    willValidate: false  },  1: [circular object HTMLButtonElement] : &lt;button class=&quot;playSingle1 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;,  2: [object HTMLButtonElement] {    accessKey: "",    addEventListener: function addEventListener() { [native code] },    after: function after() { [native code] },    animate: function animate() { [native code] },    append: function append() { [native code] },    appendChild: function appendChild() { [native code] },    ariaAtomic: null,    ariaAutoComplete: null,    ariaBrailleLabel: null,    ariaBrailleRoleDescription: null,    ariaBusy: null,    ariaChecked: null,    ariaColCount: null,    ariaColIndex: null,    ariaColSpan: null,    ariaCurrent: null,    ariaDescription: null,    ariaDisabled: null,    ariaExpanded: null,    ariaHasPopup: null,    ariaHidden: null,    ariaInvalid: null,    ariaKeyShortcuts: null,    ariaLabel: null,    ariaLevel: null,    ariaLive: null,    ariaModal: null,    ariaMultiLine: null,    ariaMultiSelectable: null,    ariaOrientation: null,    ariaPlaceholder: null,    ariaPosInSet: null,    ariaPressed: null,    ariaReadOnly: null,    ariaRelevant: null,    ariaRequired: null,    ariaRoleDescription: null,    ariaRowCount: null,    ariaRowIndex: null,    ariaRowSpan: null,    ariaSelected: null,    ariaSetSize: null,    ariaSort: null,    ariaValueMax: null,    ariaValueMin: null,    ariaValueNow: null,    ariaValueText: null,    assignedSlot: null,    attachInternals: function attachInternals() { [native code] },    attachShadow: function attachShadow() { [native code] },    ATTRIBUTE_NODE: 2,    attributes: [object NamedNodeMap] { ... },    attributeStyleMap: [object StylePropertyMap] { ... },    autocapitalize: "",    autofocus: false,    baseURI: "https://fiddle.jshell.net/_display/?editor_console=true",    before: function before() { [native code] },    blur: function blur() { [native code] },    CDATA_SECTION_NODE: 4,    checkValidity: function checkValidity() { [native code] },    checkVisibility: function checkVisibility() { [native code] },    childElementCount: 0,    childNodes: [object NodeList] { ... },    children: [object HTMLCollection] { ... },    classList: [object DOMTokenList] { ... },    className: "playSingle2 cover",    click: function click() { [native code] },    clientHeight: 0,    clientLeft: 0,    clientTop: 0,    clientWidth: 0,    cloneNode: function cloneNode() { [native code] },    closest: function closest() { [native code] },    COMMENT_NODE: 8,    compareDocumentPosition: function compareDocumentPosition() { [native code] },    computedStyleMap: function computedStyleMap() { [native code] },    contains: function contains() { [native code] },    contentEditable: "inherit",    dataset: [object DOMStringMap] { ... },    dir: "",    disabled: false,    dispatchEvent: function dispatchEvent() { [native code] },    DOCUMENT_FRAGMENT_NODE: 11,    DOCUMENT_NODE: 9,    DOCUMENT_POSITION_CONTAINED_BY: 16,    DOCUMENT_POSITION_CONTAINS: 8,    DOCUMENT_POSITION_DISCONNECTED: 1,    DOCUMENT_POSITION_FOLLOWING: 4,    DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32,    DOCUMENT_POSITION_PRECEDING: 2,    DOCUMENT_TYPE_NODE: 10,    draggable: false,    ELEMENT_NODE: 1,    elementTiming: "",    enterKeyHint: "",    ENTITY_NODE: 6,    ENTITY_REFERENCE_NODE: 5,    firstChild: null,    firstElementChild: null,    focus: function focus() { [native code] },    form: null,    formAction: "https://fiddle.jshell.net/_display/?editor_console=true",    formEnctype: "",    formMethod: "",    formNoValidate: false,    formTarget: "",    getAnimations: function getAnimations() { [native code] },    getAttribute: function getAttribute() { [native code] },    getAttributeNames: function getAttributeNames() { [native code] },    getAttributeNode: function getAttributeNode() { [native code] },    getAttributeNodeNS: function getAttributeNodeNS() { [native code] },    getAttributeNS: function getAttributeNS() { [native code] },    getBoundingClientRect: function getBoundingClientRect() { [native code] },    getClientRects: function getClientRects() { [native code] },    getElementsByClassName: function getElementsByClassName() { [native code] },    getElementsByTagName: function getElementsByTagName() { [native code] },    getElementsByTagNameNS: function getElementsByTagNameNS() { [native code] },    getInnerHTML: function getInnerHTML() { [native code] },    getRootNode: function getRootNode() { [native code] },    hasAttribute: function hasAttribute() { [native code] },    hasAttributeNS: function hasAttributeNS() { [native code] },    hasAttributes: function hasAttributes() { [native code] },    hasChildNodes: function hasChildNodes() { [native code] },    hasPointerCapture: function hasPointerCapture() { [native code] },    hidden: false,    id: "",    inert: false,    innerHTML: "",    innerText: "",    inputMode: "",    insertAdjacentElement: function insertAdjacentElement() { [native code] },    insertAdjacentHTML: function insertAdjacentHTML() { [native code] },    insertAdjacentText: function insertAdjacentText() { [native code] },    insertBefore: function insertBefore() { [native code] },    isConnected: true,    isContentEditable: false,    isDefaultNamespace: function isDefaultNamespace() { [native code] },    isEqualNode: function isEqualNode() { [native code] },    isSameNode: function isSameNode() { [native code] },    labels: [object NodeList] { ... },    lang: "",    lastChild: null,    lastElementChild: null,    localName: "button",    lookupNamespaceURI: function lookupNamespaceURI() { [native code] },    lookupPrefix: function lookupPrefix() { [native code] },    matches: function matches() { [native code] },    name: "",    namespaceURI: "http://www.w3.org/1999/xhtml",    nextElementSibling: [object HTMLButtonElement] { ... },    nextSibling: [object Text] { ... },    nodeName: "BUTTON",    nodeType: 1,    nodeValue: null,    nonce: "",    normalize: function normalize() { [native code] },    NOTATION_NODE: 12,    offsetHeight: 0,    offsetLeft: 0,    offsetParent: null,    offsetTop: 0,    offsetWidth: 0,    onabort: null,    onanimationend: null,    onanimationiteration: null,    onanimationstart: null,    onauxclick: null,    onbeforecopy: null,    onbeforecut: null,    onbeforeinput: null,    onbeforematch: null,    onbeforepaste: null,    onbeforexrselect: null,    onblur: null,    oncancel: null,    oncanplay: null,    oncanplaythrough: null,    onchange: null,    onclick: null,    onclose: null,    oncontentvisibilityautostatechange: null,    oncontextlost: null,    oncontextmenu: null,    oncontextrestored: null,    oncopy: null,    oncuechange: null,    oncut: null,    ondblclick: null,    ondrag: null,    ondragend: null,    ondragenter: null,    ondragleave: null,    ondragover: null,    ondragstart: null,    ondrop: null,    ondurationchange: null,    onemptied: null,    onended: null,    onerror: null,    onfocus: null,    onformdata: null,    onfullscreenchange: null,    onfullscreenerror: null,    ongotpointercapture: null,    oninput: null,    oninvalid: null,    onkeydown: null,    onkeypress: null,    onkeyup: null,    onload: null,    onloadeddata: null,    onloadedmetadata: null,    onloadstart: null,    onlostpointercapture: null,    onmousedown: null,    onmouseenter: null,    onmouseleave: null,    onmousemove: null,    onmouseout: null,    onmouseover: null,    onmouseup: null,    onmousewheel: null,    onpaste: null,    onpause: null,    onplay: null,    onplaying: null,    onpointercancel: null,    onpointerdown: null,    onpointerenter: null,    onpointerleave: null,    onpointermove: null,    onpointerout: null,    onpointerover: null,    onpointerrawupdate: null,    onpointerup: null,    onprogress: null,    onratechange: null,    onreset: null,    onresize: null,    onscroll: null,    onsearch: null,    onsecuritypolicyviolation: null,    onseeked: null,    onseeking: null,    onselect: null,    onselectionchange: null,    onselectstart: null,    onslotchange: null,    onstalled: null,    onsubmit: null,    onsuspend: null,    ontimeupdate: null,    ontoggle: null,    ontransitioncancel: null,    ontransitionend: null,    ontransitionrun: null,    ontransitionstart: null,    onvolumechange: null,    onwaiting: null,    onwebkitanimationend: null,    onwebkitanimationiteration: null,    onwebkitanimationstart: null,    onwebkitfullscreenchange: null,    onwebkitfullscreenerror: null,    onwebkittransitionend: null,    onwheel: null,    outerHTML: "&lt;button class=\&quot;playSingle2 cover\&quot; type=\&quot;button\&quot; data-container=\&quot;play1\&quot; data-id=\&quot;M7lc1UVf-VE\&quot;&gt;&lt;/button&gt;",    outerText: "",    ownerDocument: [circular object HTMLDocument],    parentElement: [circular object HTMLDivElement] : &lt;div class=&quot;playButtonContainer with-curtain hide&quot;&gt;      &lt;button class=&quot;playSingle0 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle1 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle2 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle3 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle4 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle5 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle6 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle7 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle8 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;    &lt;/div&gt;,    parentNode: [circular object HTMLDivElement] : &lt;div class=&quot;playButtonContainer with-curtain hide&quot;&gt;      &lt;button class=&quot;playSingle0 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle1 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle2 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle3 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle4 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle5 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle6 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle7 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle8 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;    &lt;/div&gt;,    part: [object DOMTokenList] { ... },    prefix: null,    prepend: function prepend() { [native code] },    previousElementSibling: [circular object HTMLButtonElement] : &lt;button class=&quot;playSingle1 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;,    previousSibling: [object Text] { ... },    PROCESSING_INSTRUCTION_NODE: 7,    querySelector: function querySelector() { [native code] },    querySelectorAll: function querySelectorAll() { [native code] },    releasePointerCapture: function releasePointerCapture() { [native code] },    remove: function remove() { [native code] },    removeAttribute: function removeAttribute() { [native code] },    removeAttributeNode: function removeAttributeNode() { [native code] },    removeAttributeNS: function removeAttributeNS() { [native code] },    removeChild: function removeChild() { [native code] },    removeEventListener: function removeEventListener() { [native code] },    replaceChild: function replaceChild() { [native code] },    replaceChildren: function replaceChildren() { [native code] },    replaceWith: function replaceWith() { [native code] },    reportValidity: function reportValidity() { [native code] },    requestFullscreen: function requestFullscreen() { [native code] },    requestPointerLock: function requestPointerLock() { [native code] },    role: null,    scroll: function scroll() { [native code] },    scrollBy: function scrollBy() { [native code] },    scrollHeight: 0,    scrollIntoView: function scrollIntoView() { [native code] },    scrollIntoViewIfNeeded: function scrollIntoViewIfNeeded() { [native code] },    scrollLeft: 0,    scrollTo: function scrollTo() { [native code] },    scrollTop: 0,    scrollWidth: 0,    setAttribute: function setAttribute() { [native code] },    setAttributeNode: function setAttributeNode() { [native code] },    setAttributeNodeNS: function setAttributeNodeNS() { [native code] },    setAttributeNS: function setAttributeNS() { [native code] },    setCustomValidity: function setCustomValidity() { [native code] },    setHTML: function setHTML() { [native code] },    setPointerCapture: function setPointerCapture() { [native code] },    shadowRoot: null,    slot: "",    spellcheck: true,    style: [object CSSStyleDeclaration] { ... },    tabIndex: 0,    tagName: "BUTTON",    TEXT_NODE: 3,    textContent: "",    title: "",    toggleAttribute: function toggleAttribute() { [native code] },    translate: true,    type: "button",    validationMessage: "",    validity: [object ValidityState] { ... },    value: "",    virtualKeyboardPolicy: "",    webkitMatchesSelector: function webkitMatchesSelector() { [native code] },    webkitRequestFullScreen: function webkitRequestFullScreen() { [native code] },    webkitRequestFullscreen: function webkitRequestFullscreen() { [native code] },    willValidate: false  },  3: [circular object HTMLButtonElement] : &lt;button class=&quot;playSingle3 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;,  4: [object HTMLButtonElement] {    accessKey: "",    addEventListener: function addEventListener() { [native code] },    after: function after() { [native code] },    animate: function animate() { [native code] },    append: function append() { [native code] },    appendChild: function appendChild() { [native code] },    ariaAtomic: null,    ariaAutoComplete: null,    ariaBrailleLabel: null,    ariaBrailleRoleDescription: null,    ariaBusy: null,    ariaChecked: null,    ariaColCount: null,    ariaColIndex: null,    ariaColSpan: null,    ariaCurrent: null,    ariaDescription: null,    ariaDisabled: null,    ariaExpanded: null,    ariaHasPopup: null,    ariaHidden: null,    ariaInvalid: null,    ariaKeyShortcuts: null,    ariaLabel: null,    ariaLevel: null,    ariaLive: null,    ariaModal: null,    ariaMultiLine: null,    ariaMultiSelectable: null,    ariaOrientation: null,    ariaPlaceholder: null,    ariaPosInSet: null,    ariaPressed: null,    ariaReadOnly: null,    ariaRelevant: null,    ariaRequired: null,    ariaRoleDescription: null,    ariaRowCount: null,    ariaRowIndex: null,    ariaRowSpan: null,    ariaSelected: null,    ariaSetSize: null,    ariaSort: null,    ariaValueMax: null,    ariaValueMin: null,    ariaValueNow: null,    ariaValueText: null,    assignedSlot: null,    attachInternals: function attachInternals() { [native code] },    attachShadow: function attachShadow() { [native code] },    ATTRIBUTE_NODE: 2,    attributes: [object NamedNodeMap] { ... },    attributeStyleMap: [object StylePropertyMap] { ... },    autocapitalize: "",    autofocus: false,    baseURI: "https://fiddle.jshell.net/_display/?editor_console=true",    before: function before() { [native code] },    blur: function blur() { [native code] },    CDATA_SECTION_NODE: 4,    checkValidity: function checkValidity() { [native code] },    checkVisibility: function checkVisibility() { [native code] },    childElementCount: 0,    childNodes: [object NodeList] { ... },    children: [object HTMLCollection] { ... },    classList: [object DOMTokenList] { ... },    className: "playSingle4 cover",    click: function click() { [native code] },    clientHeight: 0,    clientLeft: 0,    clientTop: 0,    clientWidth: 0,    cloneNode: function cloneNode() { [native code] },    closest: function closest() { [native code] },    COMMENT_NODE: 8,    compareDocumentPosition: function compareDocumentPosition() { [native code] },    computedStyleMap: function computedStyleMap() { [native code] },    contains: function contains() { [native code] },    contentEditable: "inherit",    dataset: [object DOMStringMap] { ... },    dir: "",    disabled: false,    dispatchEvent: function dispatchEvent() { [native code] },    DOCUMENT_FRAGMENT_NODE: 11,    DOCUMENT_NODE: 9,    DOCUMENT_POSITION_CONTAINED_BY: 16,    DOCUMENT_POSITION_CONTAINS: 8,    DOCUMENT_POSITION_DISCONNECTED: 1,    DOCUMENT_POSITION_FOLLOWING: 4,    DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32,    DOCUMENT_POSITION_PRECEDING: 2,    DOCUMENT_TYPE_NODE: 10,    draggable: false,    ELEMENT_NODE: 1,    elementTiming: "",    enterKeyHint: "",    ENTITY_NODE: 6,    ENTITY_REFERENCE_NODE: 5,    firstChild: null,    firstElementChild: null,    focus: function focus() { [native code] },    form: null,    formAction: "https://fiddle.jshell.net/_display/?editor_console=true",    formEnctype: "",    formMethod: "",    formNoValidate: false,    formTarget: "",    getAnimations: function getAnimations() { [native code] },    getAttribute: function getAttribute() { [native code] },    getAttributeNames: function getAttributeNames() { [native code] },    getAttributeNode: function getAttributeNode() { [native code] },    getAttributeNodeNS: function getAttributeNodeNS() { [native code] },    getAttributeNS: function getAttributeNS() { [native code] },    getBoundingClientRect: function getBoundingClientRect() { [native code] },    getClientRects: function getClientRects() { [native code] },    getElementsByClassName: function getElementsByClassName() { [native code] },    getElementsByTagName: function getElementsByTagName() { [native code] },    getElementsByTagNameNS: function getElementsByTagNameNS() { [native code] },    getInnerHTML: function getInnerHTML() { [native code] },    getRootNode: function getRootNode() { [native code] },    hasAttribute: function hasAttribute() { [native code] },    hasAttributeNS: function hasAttributeNS() { [native code] },    hasAttributes: function hasAttributes() { [native code] },    hasChildNodes: function hasChildNodes() { [native code] },    hasPointerCapture: function hasPointerCapture() { [native code] },    hidden: false,    id: "",    inert: false,    innerHTML: "",    innerText: "",    inputMode: "",    insertAdjacentElement: function insertAdjacentElement() { [native code] },    insertAdjacentHTML: function insertAdjacentHTML() { [native code] },    insertAdjacentText: function insertAdjacentText() { [native code] },    insertBefore: function insertBefore() { [native code] },    isConnected: true,    isContentEditable: false,    isDefaultNamespace: function isDefaultNamespace() { [native code] },    isEqualNode: function isEqualNode() { [native code] },    isSameNode: function isSameNode() { [native code] },    labels: [object NodeList] { ... },    lang: "",    lastChild: null,    lastElementChild: null,    localName: "button",    lookupNamespaceURI: function lookupNamespaceURI() { [native code] },    lookupPrefix: function lookupPrefix() { [native code] },    matches: function matches() { [native code] },    name: "",    namespaceURI: "http://www.w3.org/1999/xhtml",    nextElementSibling: [object HTMLButtonElement] { ... },    nextSibling: [object Text] { ... },    nodeName: "BUTTON",    nodeType: 1,    nodeValue: null,    nonce: "",    normalize: function normalize() { [native code] },    NOTATION_NODE: 12,    offsetHeight: 0,    offsetLeft: 0,    offsetParent: null,    offsetTop: 0,    offsetWidth: 0,    onabort: null,    onanimationend: null,    onanimationiteration: null,    onanimationstart: null,    onauxclick: null,    onbeforecopy: null,    onbeforecut: null,    onbeforeinput: null,    onbeforematch: null,    onbeforepaste: null,    onbeforexrselect: null,    onblur: null,    oncancel: null,    oncanplay: null,    oncanplaythrough: null,    onchange: null,    onclick: null,    onclose: null,    oncontentvisibilityautostatechange: null,    oncontextlost: null,    oncontextmenu: null,    oncontextrestored: null,    oncopy: null,    oncuechange: null,    oncut: null,    ondblclick: null,    ondrag: null,    ondragend: null,    ondragenter: null,    ondragleave: null,    ondragover: null,    ondragstart: null,    ondrop: null,    ondurationchange: null,    onemptied: null,    onended: null,    onerror: null,    onfocus: null,    onformdata: null,    onfullscreenchange: null,    onfullscreenerror: null,    ongotpointercapture: null,    oninput: null,    oninvalid: null,    onkeydown: null,    onkeypress: null,    onkeyup: null,    onload: null,    onloadeddata: null,    onloadedmetadata: null,    onloadstart: null,    onlostpointercapture: null,    onmousedown: null,    onmouseenter: null,    onmouseleave: null,    onmousemove: null,    onmouseout: null,    onmouseover: null,    onmouseup: null,    onmousewheel: null,    onpaste: null,    onpause: null,    onplay: null,    onplaying: null,    onpointercancel: null,    onpointerdown: null,    onpointerenter: null,    onpointerleave: null,    onpointermove: null,    onpointerout: null,    onpointerover: null,    onpointerrawupdate: null,    onpointerup: null,    onprogress: null,    onratechange: null,    onreset: null,    onresize: null,    onscroll: null,    onsearch: null,    onsecuritypolicyviolation: null,    onseeked: null,    onseeking: null,    onselect: null,    onselectionchange: null,    onselectstart: null,    onslotchange: null,    onstalled: null,    onsubmit: null,    onsuspend: null,    ontimeupdate: null,    ontoggle: null,    ontransitioncancel: null,    ontransitionend: null,    ontransitionrun: null,    ontransitionstart: null,    onvolumechange: null,    onwaiting: null,    onwebkitanimationend: null,    onwebkitanimationiteration: null,    onwebkitanimationstart: null,    onwebkitfullscreenchange: null,    onwebkitfullscreenerror: null,    onwebkittransitionend: null,    onwheel: null,    outerHTML: "&lt;button class=\&quot;playSingle4 cover\&quot; type=\&quot;button\&quot; data-container=\&quot;play1\&quot; data-id=\&quot;M7lc1UVf-VE\&quot;&gt;&lt;/button&gt;",    outerText: "",    ownerDocument: [circular object HTMLDocument],    parentElement: [circular object HTMLDivElement] : &lt;div class=&quot;playButtonContainer with-curtain hide&quot;&gt;      &lt;button class=&quot;playSingle0 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle1 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle2 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle3 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle4 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle5 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle6 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle7 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle8 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;    &lt;/div&gt;,    parentNode: [circular object HTMLDivElement] : &lt;div class=&quot;playButtonContainer with-curtain hide&quot;&gt;      &lt;button class=&quot;playSingle0 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle1 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle2 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle3 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle4 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle5 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle6 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle7 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle8 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;    &lt;/div&gt;,    part: [object DOMTokenList] { ... },    prefix: null,    prepend: function prepend() { [native code] },    previousElementSibling: [circular object HTMLButtonElement] : &lt;button class=&quot;playSingle3 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;,    previousSibling: [object Text] { ... },    PROCESSING_INSTRUCTION_NODE: 7,    querySelector: function querySelector() { [native code] },    querySelectorAll: function querySelectorAll() { [native code] },    releasePointerCapture: function releasePointerCapture() { [native code] },    remove: function remove() { [native code] },    removeAttribute: function removeAttribute() { [native code] },    removeAttributeNode: function removeAttributeNode() { [native code] },    removeAttributeNS: function removeAttributeNS() { [native code] },    removeChild: function removeChild() { [native code] },    removeEventListener: function removeEventListener() { [native code] },    replaceChild: function replaceChild() { [native code] },    replaceChildren: function replaceChildren() { [native code] },    replaceWith: function replaceWith() { [native code] },    reportValidity: function reportValidity() { [native code] },    requestFullscreen: function requestFullscreen() { [native code] },    requestPointerLock: function requestPointerLock() { [native code] },    role: null,    scroll: function scroll() { [native code] },    scrollBy: function scrollBy() { [native code] },    scrollHeight: 0,    scrollIntoView: function scrollIntoView() { [native code] },    scrollIntoViewIfNeeded: function scrollIntoViewIfNeeded() { [native code] },    scrollLeft: 0,    scrollTo: function scrollTo() { [native code] },    scrollTop: 0,    scrollWidth: 0,    setAttribute: function setAttribute() { [native code] },    setAttributeNode: function setAttributeNode() { [native code] },    setAttributeNodeNS: function setAttributeNodeNS() { [native code] },    setAttributeNS: function setAttributeNS() { [native code] },    setCustomValidity: function setCustomValidity() { [native code] },    setHTML: function setHTML() { [native code] },    setPointerCapture: function setPointerCapture() { [native code] },    shadowRoot: null,    slot: "",    spellcheck: true,    style: [object CSSStyleDeclaration] { ... },    tabIndex: 0,    tagName: "BUTTON",    TEXT_NODE: 3,    textContent: "",    title: "",    toggleAttribute: function toggleAttribute() { [native code] },    translate: true,    type: "button",    validationMessage: "",    validity: [object ValidityState] { ... },    value: "",    virtualKeyboardPolicy: "",    webkitMatchesSelector: function webkitMatchesSelector() { [native code] },    webkitRequestFullScreen: function webkitRequestFullScreen() { [native code] },    webkitRequestFullscreen: function webkitRequestFullscreen() { [native code] },    willValidate: false  },  5: [circular object HTMLButtonElement] : &lt;button class=&quot;playSingle5 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;,  6: [object HTMLButtonElement] {    accessKey: "",    addEventListener: function addEventListener() { [native code] },    after: function after() { [native code] },    animate: function animate() { [native code] },    append: function append() { [native code] },    appendChild: function appendChild() { [native code] },    ariaAtomic: null,    ariaAutoComplete: null,    ariaBrailleLabel: null,    ariaBrailleRoleDescription: null,    ariaBusy: null,    ariaChecked: null,    ariaColCount: null,    ariaColIndex: null,    ariaColSpan: null,    ariaCurrent: null,    ariaDescription: null,    ariaDisabled: null,    ariaExpanded: null,    ariaHasPopup: null,    ariaHidden: null,    ariaInvalid: null,    ariaKeyShortcuts: null,    ariaLabel: null,    ariaLevel: null,    ariaLive: null,    ariaModal: null,    ariaMultiLine: null,    ariaMultiSelectable: null,    ariaOrientation: null,    ariaPlaceholder: null,    ariaPosInSet: null,    ariaPressed: null,    ariaReadOnly: null,    ariaRelevant: null,    ariaRequired: null,    ariaRoleDescription: null,    ariaRowCount: null,    ariaRowIndex: null,    ariaRowSpan: null,    ariaSelected: null,    ariaSetSize: null,    ariaSort: null,    ariaValueMax: null,    ariaValueMin: null,    ariaValueNow: null,    ariaValueText: null,    assignedSlot: null,    attachInternals: function attachInternals() { [native code] },    attachShadow: function attachShadow() { [native code] },    ATTRIBUTE_NODE: 2,    attributes: [object NamedNodeMap] { ... },    attributeStyleMap: [object StylePropertyMap] { ... },    autocapitalize: "",    autofocus: false,    baseURI: "https://fiddle.jshell.net/_display/?editor_console=true",    before: function before() { [native code] },    blur: function blur() { [native code] },    CDATA_SECTION_NODE: 4,    checkValidity: function checkValidity() { [native code] },    checkVisibility: function checkVisibility() { [native code] },    childElementCount: 0,    childNodes: [object NodeList] { ... },    children: [object HTMLCollection] { ... },    classList: [object DOMTokenList] { ... },    className: "playSingle6 cover",    click: function click() { [native code] },    clientHeight: 0,    clientLeft: 0,    clientTop: 0,    clientWidth: 0,    cloneNode: function cloneNode() { [native code] },    closest: function closest() { [native code] },    COMMENT_NODE: 8,    compareDocumentPosition: function compareDocumentPosition() { [native code] },    computedStyleMap: function computedStyleMap() { [native code] },    contains: function contains() { [native code] },    contentEditable: "inherit",    dataset: [object DOMStringMap] { ... },    dir: "",    disabled: false,    dispatchEvent: function dispatchEvent() { [native code] },    DOCUMENT_FRAGMENT_NODE: 11,    DOCUMENT_NODE: 9,    DOCUMENT_POSITION_CONTAINED_BY: 16,    DOCUMENT_POSITION_CONTAINS: 8,    DOCUMENT_POSITION_DISCONNECTED: 1,    DOCUMENT_POSITION_FOLLOWING: 4,    DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32,    DOCUMENT_POSITION_PRECEDING: 2,    DOCUMENT_TYPE_NODE: 10,    draggable: false,    ELEMENT_NODE: 1,    elementTiming: "",    enterKeyHint: "",    ENTITY_NODE: 6,    ENTITY_REFERENCE_NODE: 5,    firstChild: null,    firstElementChild: null,    focus: function focus() { [native code] },    form: null,    formAction: "https://fiddle.jshell.net/_display/?editor_console=true",    formEnctype: "",    formMethod: "",    formNoValidate: false,    formTarget: "",    getAnimations: function getAnimations() { [native code] },    getAttribute: function getAttribute() { [native code] },    getAttributeNames: function getAttributeNames() { [native code] },    getAttributeNode: function getAttributeNode() { [native code] },    getAttributeNodeNS: function getAttributeNodeNS() { [native code] },    getAttributeNS: function getAttributeNS() { [native code] },    getBoundingClientRect: function getBoundingClientRect() { [native code] },    getClientRects: function getClientRects() { [native code] },    getElementsByClassName: function getElementsByClassName() { [native code] },    getElementsByTagName: function getElementsByTagName() { [native code] },    getElementsByTagNameNS: function getElementsByTagNameNS() { [native code] },    getInnerHTML: function getInnerHTML() { [native code] },    getRootNode: function getRootNode() { [native code] },    hasAttribute: function hasAttribute() { [native code] },    hasAttributeNS: function hasAttributeNS() { [native code] },    hasAttributes: function hasAttributes() { [native code] },    hasChildNodes: function hasChildNodes() { [native code] },    hasPointerCapture: function hasPointerCapture() { [native code] },    hidden: false,    id: "",    inert: false,    innerHTML: "",    innerText: "",    inputMode: "",    insertAdjacentElement: function insertAdjacentElement() { [native code] },    insertAdjacentHTML: function insertAdjacentHTML() { [native code] },    insertAdjacentText: function insertAdjacentText() { [native code] },    insertBefore: function insertBefore() { [native code] },    isConnected: true,    isContentEditable: false,    isDefaultNamespace: function isDefaultNamespace() { [native code] },    isEqualNode: function isEqualNode() { [native code] },    isSameNode: function isSameNode() { [native code] },    labels: [object NodeList] { ... },    lang: "",    lastChild: null,    lastElementChild: null,    localName: "button",    lookupNamespaceURI: function lookupNamespaceURI() { [native code] },    lookupPrefix: function lookupPrefix() { [native code] },    matches: function matches() { [native code] },    name: "",    namespaceURI: "http://www.w3.org/1999/xhtml",    nextElementSibling: [object HTMLButtonElement] { ... },    nextSibling: [object Text] { ... },    nodeName: "BUTTON",    nodeType: 1,    nodeValue: null,    nonce: "",    normalize: function normalize() { [native code] },    NOTATION_NODE: 12,    offsetHeight: 0,    offsetLeft: 0,    offsetParent: null,    offsetTop: 0,    offsetWidth: 0,    onabort: null,    onanimationend: null,    onanimationiteration: null,    onanimationstart: null,    onauxclick: null,    onbeforecopy: null,    onbeforecut: null,    onbeforeinput: null,    onbeforematch: null,    onbeforepaste: null,    onbeforexrselect: null,    onblur: null,    oncancel: null,    oncanplay: null,    oncanplaythrough: null,    onchange: null,    onclick: null,    onclose: null,    oncontentvisibilityautostatechange: null,    oncontextlost: null,    oncontextmenu: null,    oncontextrestored: null,    oncopy: null,    oncuechange: null,    oncut: null,    ondblclick: null,    ondrag: null,    ondragend: null,    ondragenter: null,    ondragleave: null,    ondragover: null,    ondragstart: null,    ondrop: null,    ondurationchange: null,    onemptied: null,    onended: null,    onerror: null,    onfocus: null,    onformdata: null,    onfullscreenchange: null,    onfullscreenerror: null,    ongotpointercapture: null,    oninput: null,    oninvalid: null,    onkeydown: null,    onkeypress: null,    onkeyup: null,    onload: null,    onloadeddata: null,    onloadedmetadata: null,    onloadstart: null,    onlostpointercapture: null,    onmousedown: null,    onmouseenter: null,    onmouseleave: null,    onmousemove: null,    onmouseout: null,    onmouseover: null,    onmouseup: null,    onmousewheel: null,    onpaste: null,    onpause: null,    onplay: null,    onplaying: null,    onpointercancel: null,    onpointerdown: null,    onpointerenter: null,    onpointerleave: null,    onpointermove: null,    onpointerout: null,    onpointerover: null,    onpointerrawupdate: null,    onpointerup: null,    onprogress: null,    onratechange: null,    onreset: null,    onresize: null,    onscroll: null,    onsearch: null,    onsecuritypolicyviolation: null,    onseeked: null,    onseeking: null,    onselect: null,    onselectionchange: null,    onselectstart: null,    onslotchange: null,    onstalled: null,    onsubmit: null,    onsuspend: null,    ontimeupdate: null,    ontoggle: null,    ontransitioncancel: null,    ontransitionend: null,    ontransitionrun: null,    ontransitionstart: null,    onvolumechange: null,    onwaiting: null,    onwebkitanimationend: null,    onwebkitanimationiteration: null,    onwebkitanimationstart: null,    onwebkitfullscreenchange: null,    onwebkitfullscreenerror: null,    onwebkittransitionend: null,    onwheel: null,    outerHTML: "&lt;button class=\&quot;playSingle6 cover\&quot; type=\&quot;button\&quot; data-container=\&quot;play1\&quot; data-id=\&quot;M7lc1UVf-VE\&quot;&gt;&lt;/button&gt;",    outerText: "",    ownerDocument: [circular object HTMLDocument],    parentElement: [circular object HTMLDivElement] : &lt;div class=&quot;playButtonContainer with-curtain hide&quot;&gt;      &lt;button class=&quot;playSingle0 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle1 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle2 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle3 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle4 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle5 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle6 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle7 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle8 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;    &lt;/div&gt;,    parentNode: [circular object HTMLDivElement] : &lt;div class=&quot;playButtonContainer with-curtain hide&quot;&gt;      &lt;button class=&quot;playSingle0 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle1 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle2 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle3 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle4 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle5 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle6 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle7 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle8 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;    &lt;/div&gt;,    part: [object DOMTokenList] { ... },    prefix: null,    prepend: function prepend() { [native code] },    previousElementSibling: [circular object HTMLButtonElement] : &lt;button class=&quot;playSingle5 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;,    previousSibling: [object Text] { ... },    PROCESSING_INSTRUCTION_NODE: 7,    querySelector: function querySelector() { [native code] },    querySelectorAll: function querySelectorAll() { [native code] },    releasePointerCapture: function releasePointerCapture() { [native code] },    remove: function remove() { [native code] },    removeAttribute: function removeAttribute() { [native code] },    removeAttributeNode: function removeAttributeNode() { [native code] },    removeAttributeNS: function removeAttributeNS() { [native code] },    removeChild: function removeChild() { [native code] },    removeEventListener: function removeEventListener() { [native code] },    replaceChild: function replaceChild() { [native code] },    replaceChildren: function replaceChildren() { [native code] },    replaceWith: function replaceWith() { [native code] },    reportValidity: function reportValidity() { [native code] },    requestFullscreen: function requestFullscreen() { [native code] },    requestPointerLock: function requestPointerLock() { [native code] },    role: null,    scroll: function scroll() { [native code] },    scrollBy: function scrollBy() { [native code] },    scrollHeight: 0,    scrollIntoView: function scrollIntoView() { [native code] },    scrollIntoViewIfNeeded: function scrollIntoViewIfNeeded() { [native code] },    scrollLeft: 0,    scrollTo: function scrollTo() { [native code] },    scrollTop: 0,    scrollWidth: 0,    setAttribute: function setAttribute() { [native code] },    setAttributeNode: function setAttributeNode() { [native code] },    setAttributeNodeNS: function setAttributeNodeNS() { [native code] },    setAttributeNS: function setAttributeNS() { [native code] },    setCustomValidity: function setCustomValidity() { [native code] },    setHTML: function setHTML() { [native code] },    setPointerCapture: function setPointerCapture() { [native code] },    shadowRoot: null,    slot: "",    spellcheck: true,    style: [object CSSStyleDeclaration] { ... },    tabIndex: 0,    tagName: "BUTTON",    TEXT_NODE: 3,    textContent: "",    title: "",    toggleAttribute: function toggleAttribute() { [native code] },    translate: true,    type: "button",    validationMessage: "",    validity: [object ValidityState] { ... },    value: "",    virtualKeyboardPolicy: "",    webkitMatchesSelector: function webkitMatchesSelector() { [native code] },    webkitRequestFullScreen: function webkitRequestFullScreen() { [native code] },    webkitRequestFullscreen: function webkitRequestFullscreen() { [native code] },    willValidate: false  },  7: [circular object HTMLButtonElement] : &lt;button class=&quot;playSingle7 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot;&gt;&lt;/button&gt;,  8: [object HTMLButtonElement] {    accessKey: "",    addEventListener: function addEventListener() { [native code] },    after: function after() { [native code] },    animate: function animate() { [native code] },    append: function append() { [native code] },    appendChild: function appendChild() { [native code] },    ariaAtomic: null,    ariaAutoComplete: null,    ariaBrailleLabel: null,    ariaBrailleRoleDescription: null,    ariaBusy: null,    ariaChecked: null,    ariaColCount: null,    ariaColIndex: null,    ariaColSpan: null,    ariaCurrent: null,    ariaDescription: null,    ariaDisabled: null,    ariaExpanded: null,    ariaHasPopup: null,    ariaHidden: null,    ariaInvalid: null,    ariaKeyShortcuts: null,    ariaLabel: null,    ariaLevel: null,    ariaLive: null,    ariaModal: null,    ariaMultiLine: null,    ariaMultiSelectable: null,    ariaOrientation: null,    ariaPlaceholder: null,    ariaPosInSet: null,    ariaPressed: null,    ariaReadOnly: null,    ariaRelevant: null,    ariaRequired: null,    ariaRoleDescription: null,    ariaRowCount: null,    ariaRowIndex: null,    ariaRowSpan: null,    ariaSelected: null,    ariaSetSize: null,    ariaSort: null,    ariaValueMax: null,    ariaValueMin: null,    ariaValueNow: null,    ariaValueText: null,    assignedSlot: null,    attachInternals: function attachInternals() { [native code] },    attachShadow: function attachShadow() { [native code] },    ATTRIBUTE_NODE: 2,    attributes: [object NamedNodeMap] { ... },    attributeStyleMap: [object StylePropertyMap] { ... },    autocapitalize: "",    autofocus: false,    baseURI: "https://fiddle.jshell.net/_display/?editor_console=true",    before: function before() { [native code] },    blur: function blur() { [native code] },    CDATA_SECTION_NODE: 4,    checkValidity: function checkValidity() { [native code] },    checkVisibility: function checkVisibility() { [native code] },    childElementCount: 0,    childNodes: [object NodeList] { ... },    children: [object HTMLCollection] { ... },    classList: [object DOMTokenList] { ... },    className: "playSingle8 cover",    click: function click() { [native code] },    clientHeight: 0,    clientLeft: 0,    clientTop: 0,    clientWidth: 0,    cloneNode: function cloneNode() { [native code] },    closest: function closest() { [native code] },    COMMENT_NODE: 8,    compareDocumentPosition: function compareDocumentPosition() { [native code] },    computedStyleMap: function computedStyleMap() { [native code] },    contains: function contains() { [native code] },    contentEditable: "inherit",    dataset: [object DOMStringMap] { ... },    dir: "",    disabled: false,    dispatchEvent: function dispatchEvent() { [native code] },    DOCUMENT_FRAGMENT_NODE: 11,    DOCUMENT_NODE: 9,    DOCUMENT_POSITION_CONTAINED_BY: 16,    DOCUMENT_POSITION_CONTAINS: 8,    DOCUMENT_POSITION_DISCONNECTED: 1,    DOCUMENT_POSITION_FOLLOWING: 4,    DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32,    DOCUMENT_POSITION_PRECEDING: 2,    DOCUMENT_TYPE_NODE: 10,    draggable: false,    ELEMENT_NODE: 1,    elementTiming: "",    enterKeyHint: "",    ENTITY_NODE: 6,    ENTITY_REFERENCE_NODE: 5,    firstChild: null,    firstElementChild: null,    focus: function focus() { [native code] },    form: null,    formAction: "https://fiddle.jshell.net/_display/?editor_console=true",    formEnctype: "",    formMethod: "",    formNoValidate: false,    formTarget: "",    getAnimations: function getAnimations() { [native code] },    getAttribute: function getAttribute() { [native code] },    getAttributeNames: function getAttributeNames() { [native code] },    getAttributeNode: function getAttributeNode() { [native code] },    getAttributeNodeNS: function getAttributeNodeNS() { [native code] },    getAttributeNS: function getAttributeNS() { [native code] },    getBoundingClientRect: function getBoundingClientRect() { [native code] },    getClientRects: function getClientRects() { [native code] },    getElementsByClassName: function getElementsByClassName() { [native code] },    getElementsByTagName: function getElementsByTagName() { [native code] },    getElementsByTagNameNS: function getElementsByTagNameNS() { [native code] },    getInnerHTML: function getInnerHTML() { [native code] },    getRootNode: function getRootNode() { [native code] },    hasAttribute: function hasAttribute() { [native code] },    hasAttributeNS: function hasAttributeNS() { [native code] },    hasAttributes: function hasAttributes() { [native code] },    hasChildNodes: function hasChildNodes() { [native code] },    hasPointerCapture: function hasPointerCapture() { [native code] },    hidden: false,    id: "",    inert: false,    innerHTML: "",    innerText: "",    inputMode: "",    insertAdjacentElement: function insertAdjacentElement() { [native code] },    insertAdjacentHTML: function insertAdjacentHTML() { [native code] },    insertAdjacentText: function insertAdjacentText() { [native code] },    insertBefore: function insertBefore() { [native code] },    isConnected: true,    isContentEditable: false,    isDefaultNamespace: function isDefaultNamespace() { [native code] },    isEqualNode: function isEqualNode() { [native code] },    isSameNode: function isSameNode() { [native code] },    labels: [object NodeList] { ... },    lang: "",    lastChild: null,    lastElementChild: null,    localName: "button",    lookupNamespaceURI: function lookupNamespaceURI() { [native code] },    lookupPrefix: function lookupPrefix() { [native code] },    matches: function matches() { [native code] },    name: "",    namespaceURI: "http://www.w3.org/1999/xhtml",    nextElementSibling: null,    nextSibling: [object Text] { ... },    nodeName: "BUTTON",    nodeType: 1,    nodeValue: null,    nonce: "",    normalize: function normalize() { [native code] },    NOTATION_NODE: 12,    offsetHeight: 0,    offsetLeft: 0,    offsetParent: null,    offsetTop: 0,    offsetWidth: 0,    onabort: null,    onanimationend: null,    onanimationiteration: null,    onanimationstart: null,    onauxclick: null,    onbeforecopy: null,    onbeforecut: null,    onbeforeinput: null,    onbeforematch: null,    onbeforepaste: null,    onbeforexrselect: null,    onblur: null,    oncancel: null,    oncanplay: null,    oncanplaythrough: null,    onchange: null,    onclick: null,    onclose: null,    oncontentvisibilityautostatechange: null,    oncontextlost: null,    oncontextmenu: null,    oncontextrestored: null,    oncopy: null,    oncuechange: null,    oncut: null,    ondblclick: null,    ondrag: null,    ondragend: null,    ondragenter: null,    ondragleave: null,    ondragover: null,    ondragstart: null,    ondrop: null,    ondurationchange: null,    onemptied: null,    onended: null,    onerror: null,    onfocus: null,    onformdata: null,    onfullscreenchange: null,    onfullscreenerror: null,    ongotpointercapture: null,    oninput: null,    oninvalid: null,    onkeydown: null,    onkeypress: null,    onkeyup: null,    onload: null,    onloadeddata: null,    onloadedmetadata: null,    onloadstart: null,    onlostpointercapture: null,    onmousedown: null,    onmouseenter: null,    onmouseleave: null,    onmousemove: null,    onmouseout: null,    onmouseover: null,    onmouseup: null,    onmousewheel: null,    onpaste: null,    onpause: null,    onplay: null,    onplaying: null,    onpointercancel: null,    onpointerdown: null,    onpointerenter: null,    onpointerleave: null,    onpointermove: null,    onpointerout: null,    onpointerover: null,    onpointerrawupdate: null,    onpointerup: null,    onprogress: null,    onratechange: null,    onreset: null,    onresize: null,    onscroll: null,    onsearch: null,    onsecuritypolicyviolation: null,    onseeked: null,    onseeking: null,    onselect: null,    onselectionchange: null,    onselectstart: null,    onslotchange: null,    onstalled: null,    onsubmit: null,    onsuspend: null,    ontimeupdate: null,    ontoggle: null,    ontransitioncancel: null,    ontransitionend: null,    ontransitionrun: null,    ontransitionstart: null,    onvolumechange: null,    onwaiting: null,    onwebkitanimationend: null,    onwebkitanimationiteration: null,    onwebkitanimationstart: null,    onwebkitfullscreenchange: null,    onwebkitfullscreenerror: null,    onwebkittransitionend: null,    onwheel: null,    outerHTML: "&lt;button class=\&quot;playSingle8 cover\&quot; type=\&quot;button\&quot; data-container=\&quot;play1\&quot; data-id=\&quot;M7lc1UVf-VE\&quot;&gt;&lt;/button&gt;",    outerText: "",    ownerDocument: [circular object HTMLDocument],    parentElement: [circular object HTMLDivElement] : &lt;div class=&quot;playButtonContainer with-curtain hide&quot;&gt;      &lt;button class=&quot;playSingle0 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle1 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle2 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle3 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle4 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle5 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle6 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle7 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle8 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;    &lt;/div&gt;,    parentNode: [circular object HTMLDivElement] : &lt;div class=&quot;playButtonContainer with-curtain hide&quot;&gt;      &lt;button class=&quot;playSingle0 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle1 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle2 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle3 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle4 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle5 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle6 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle7 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot;&gt;&lt;/button&gt;      &lt;button class=&quot;playSingle8 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot; data-id=&quot;M7lc1UVf-VE&quot;&gt;&lt;/button&gt;    &lt;/div&gt;,    part: [object DOMTokenList] { ... },    prefix: null,    prepend: function prepend() { [native code] },    previousElementSibling: [circular object HTMLButtonElement] : &lt;button class=&quot;playSingle7 cover&quot; type=&quot;button&quot; data-container=&quot;play1&quot;&gt;&lt;/button&gt;,    previousSibling: [object Text] { ... },    PROCESSING_INSTRUCTION_NODE: 7,    querySelector: function querySelector() { [native code] },    querySelectorAll: function querySelectorAll() { [native code] },    releasePointerCapture: function releasePointerCapture() { [native code] },    remove: function remove() { [native code] },    removeAttribute: function removeAttribute() { [native code] },    removeAttributeNode: function removeAttributeNode() { [native code] },    removeAttributeNS: function removeAttributeNS() { [native code] },    removeChild: function removeChild() { [native code] },    removeEventListener: function removeEventListener() { [native code] },    replaceChild: function replaceChild() { [native code] },    replaceChildren: function replaceChildren() { [native code] },    replaceWith: function replaceWith() { [native code] },    reportValidity: function reportValidity() { [native code] },    requestFullscreen: function requestFullscreen() { [native code] },    requestPointerLock: function requestPointerLock() { [native code] },    role: null,    scroll: function scroll() { [native code] },    scrollBy: function scrollBy() { [native code] },    scrollHeight: 0,    scrollIntoView: function scrollIntoView() { [native code] },    scrollIntoViewIfNeeded: function scrollIntoViewIfNeeded() { [native code] },    scrollLeft: 0,    scrollTo: function scrollTo() { [native code] },    scrollTop: 0,    scrollWidth: 0,    setAttribute: function setAttribute() { [native code] },    setAttributeNode: function setAttributeNode() { [native code] },    setAttributeNodeNS: function setAttributeNodeNS() { [native code] },    setAttributeNS: function setAttributeNS() { [native code] },    setCustomValidity: function setCustomValidity() { [native code] },    setHTML: function setHTML() { [native code] },    setPointerCapture: function setPointerCapture() { [native code] },    shadowRoot: null,    slot: "",    spellcheck: true,    style: [object CSSStyleDeclaration] { ... },    tabIndex: 0,    tagName: "BUTTON",    TEXT_NODE: 3,    textContent: "",    title: "",    toggleAttribute: function toggleAttribute() { [native code] },    translate: true,    type: "button",    validationMessage: "",    validity: [object ValidityState] { ... },    value: "",    virtualKeyboardPolicy: "",    webkitMatchesSelector: function webkitMatchesSelector() { [native code] },    webkitRequestFullScreen: function webkitRequestFullScreen() { [native code] },    webkitRequestFullscreen: function webkitRequestFullscreen() { [native code] },    willValidate: false  },  entries: function entries() { [native code] },  forEach: function forEach() { [native code] },  item: function item() { [native code] },  keys: function keys() { [native code] },  length: 9,  values: function values() { [native code] } }
Ok so here's the next question: what information is it that you need from the elements with 'data-container="play" '?
 
That is how the blue buttons appear on the screen.
that is not answering my question. You are querying the document for the buttons.. ok. Why do you need them for? Coming back to your answer to an earlier question of mine. You said that ['0','3','5','7'] would get replaced with totalP. ok. We know that totalP now contains an array of html element nodes. If you do this, you will be looping through the array. My question is the same... Why do you need to loop through the items in totalP, and what are the pieces of information you need from the elements in the array?
What I know is that the code can't work written this way:

JavaScript:
const totalP =  document.querySelectorAll("[data-container=\"play1\"]");

  ['0', '3', '5', '7'].forEach(function callback(value, index) {
    players.add(".playSingle" + index, (playerVarsList[index] || {}));
  });

Because, ['0', '3', '5', '7']. is where totalP would be placed.

How would I resolve that?
 
that is not answering my question. You are querying the document for the buttons.. ok. Why do you need them for? Coming back to your answer to an earlier question of mine. You said that ['0','3','5','7'] would get replaced with totalP. ok. We know that totalP now contains an array of html element nodes. If you do this, you will be looping through the array. My question is the same... Why do you need to loop through the items in totalP, and what are the pieces of information you need from the elements in the array?

I need to loop through the items in totalP to select the numbers that are in the array.

Inside the array I need this information:

JavaScript:
playerVars: {
        end: 1800,
        playlist: "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g",
        start: 150
      }
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom