Adding the same superscript to element with identical attribute-CodePudding

I am trying to create a function that will dynamically add a superscript based on a DOM elements attribute. This function needs to add the same superscript number if the attribute value is identical.

HTML:

<span class='disclosure' data-id="test1">Footnote</span>
<span class='disclosure' data-id="test2">Another footnote</span>
<span class='disclosure' data-id="test3">Another footnote</span>
<span class='disclosure' data-id="test1">Another footnote</span>

JS:

        let disclosureElement = document.querySelectorAll('span[data-id]'),
        disclosureArray = [],
        footnoteNumber = 1;
    function createDisclosureArray(){    
        for (let i = 0, max=disclosureElement.length; i < max; i  ) {
            let fragmentId = disclosureElement[i].dataset.id;
            let uniqueIdString = Math.random().toString(16).slice(2,8);
            disclosureArray.push({
                fragmentId: fragmentId,
                anchorId: fragmentId  '-'  uniqueIdString,
                superScript: footnoteNumber
            });
            anchorTag = document.createElement('a');
            anchorTag.setAttribute('href', '#' disclosureArray[i].anchorId);
            anchorTag.setAttribute('class', 'disclosureAnchor');
            sup = document.createElement('sup');
            const fragment = document.createDocumentFragment();
            const superScript = fragment
                .appendChild(anchorTag)
                .appendChild(sup);
            superScript.textContent = '[' disclosureArray[i].superScript ']';
            disclosureElement[i].append(fragment);
            footnoteNumber  ;
        }

        return disclosureArray;
    }
createDisclosureArray();

The above will loop through the array of objects and add the superscript. However, I need it to add a matching superscript for all elements that have identical data-id attributes.

For example, <span class='disclosure' data-id="test1">footnote</span> and <span class='disclosure' data-id="test1">Another footnote</span> should have the same superscript footnote number since their data-id attributes have the same value.

CodePudding user response：

I have added a previous object which contains dataset.ids as keys with footnoteNumbers as values. I only add a key value pair if the dataset.id is not already in the previous object. Then I put the value of the current dataset.id key's value (ie the original footnote assigned to that dataset.id) into a variable called n. I use assign superScript to the value of n

Here is the snippet:

         let disclosureElement = document.querySelectorAll('span[data-id]');
        let disclosureArray = [];
        let footnoteNumber = 1;

        let previous = {};
        let n;       
        
        function createDisclosureArray(){    
            for (let i = 0, max=disclosureElement.length; i < max; i  ) {

                if(!previous.hasOwnProperty(disclosureElement[i].dataset.id)){
                    previous[disclosureElement[i].dataset.id] = footnoteNumber;
                }
                n = previous[disclosureElement[i].dataset.id];


                let fragmentId = disclosureElement[i].dataset.id;
                let uniqueIdString = Math.random().toString(16).slice(2,8);
                disclosureArray.push({
                    fragmentId: fragmentId,
                    anchorId: fragmentId  '-'  uniqueIdString,
                    //superScript: footnoteNumber

                    superScript: n

                });
                anchorTag = document.createElement('a');
                anchorTag.setAttribute('href', '#' disclosureArray[i].anchorId);
                anchorTag.setAttribute('class', 'disclosureAnchor');
                sup = document.createElement('sup');
                const fragment = document.createDocumentFragment();
                const superScript = fragment
                    .appendChild(anchorTag)
                    .appendChild(sup);
                superScript.textContent = '[' disclosureArray[i].superScript ']';
                disclosureElement[i].append(fragment);
                footnoteNumber  ;
            }

            return disclosureArray;
        }
        createDisclosureArray();

    <span class='disclosure' data-id="test1">Footnote</span>
    <span class='disclosure' data-id="test2">Another footnote</span>
    <span class='disclosure' data-id="test3">Another footnote</span>
    <span class='disclosure' data-id="test1">Another footnote</span>