function alphabetizeImgTags(imgtags){
            
            var imageTagsArray = imgtags.split('.gif');
            var enteredCardNameTags = imgtags.split('>');
            
            // get just image names
            var cardNameToTag = {}
            for (index = 0; index < imageTagsArray.length-1; index++){
                // get card name for key
                var firstLetter = imageTagsArray[index].lastIndexOf('/') + 1;
                var cardName = imageTagsArray[index].substring(firstLetter, imageTagsArray[index].length);

                // get original img tag for value;
                var currentTag = enteredCardNameTags[index];
                var imgTag = currentTag.substring(currentTag.indexOf("<", currentTag.length)) + '>';

                // handle duplicates
                if ( cardName in cardNameToTag){
                    cardNameToTag[cardName].push(imgTag);
                }
                else{
                    cardNameToTag[cardName] = [imgTag];
                }
            }
            
            // sort card names
            var cardNamesArray = Object.keys(cardNameToTag);
            cardNamesArray.sort();

            // make sorted list of tags
            var sortedTags = [];
            cardNamesArray.forEach( cardName => {

                cardNameToTag[cardName].forEach( imgTag => {
                    sortedTags.push(imgTag.trim());
                })
            })
        
            
            // return sorted
            return sortedTags.toString().replaceAll(',', '');
        }
                
                
                
                async function sortColorsTCGData(){
            colorSeriesData = await fetch('Colors TCG.html')
                .then(data => {
                  return data.text()
                })
                .then( data => {
                    var tableBeginning = data.indexOf('<table id="colors" width="100%">')
                    var tableEnding = data.lastIndexOf("<! -- FOOTER INCLUDES ALL YOUR CREDITS -- >")
                    var dataRows = data.substring(tableBeginning, tableEnding).split("</tr>");
                    dataRows.splice(0,1);
                    dataRows.pop();

                    // remove text around data
                    for (index = 0; index < dataRows.length; index++){
                        dataRows[index] = dataRows[index].trim()
                        dataRows[index] = dataRows[index].replaceAll("<tr>", '');
                        dataRows[index] = dataRows[index].replaceAll("<td>", '');
                        var newDataRow = dataRows[index].split("</td>");

                        // index 0, 1, and 3
                        newDataRow[0] = newDataRow[0].replaceAll("<tr><td>", '');
                        newDataRow[1] = newDataRow[1].replaceAll("<tr><td>", '');
                        newDataRow[3] = newDataRow[3].replaceAll('<td align="center">', '');
                        // index 2, make deck name 
                        var endOfLinkIndex = newDataRow[2].lastIndexOf('">')
                        newDataRow[2] = newDataRow[2].substring(endOfLinkIndex+2, newDataRow[2].length).replaceAll("</a>",'').replaceAll(" ", '').toLowerCase();

                        newDataRow.pop();
                        dataRows[index] = newDataRow;

                    }

                    var testDictionary = {};
                    // create deck color dictionary global variable
                    for (index = 0; index < dataRows.length; index++){
                         dataRow = dataRows[index];
                         // assign deck name series and color
                        testDictionary[dataRow[2].trim()] = [dataRow[0], dataRow[3]];
                    }
                    return testDictionary;
                })
            
            return colorSeriesData;
        }