Update templates/index.html

templates/index.html

@@ -93,13 +93,48 @@
                 challengesTitle.style.marginTop = '10px';
                 challengesTitle.textContent = 'Challenges:';
                 
-                const challengesList = document.createElement('ul');
+                const challengesList = document.createElement('div');
                 challengesList.className = 'key-issue-challenges';
                 
                 issue.challenges.forEach(challenge => {
-                    const challengeItem = document.createElement('li');
-                    challengeItem.textContent = challenge;
-                    challengesList.appendChild(challengeItem);
+                    const challengeTag = document.createElement('div');
+                    challengeTag.className = 'challenge-tag';
+                    challengeTag.textContent = challenge;
+                    
+                    // Add click handler to toggle selection
+                    challengeTag.addEventListener('click', function(e) {
+                        e.stopPropagation(); // Prevent triggering parent card click
+                        this.classList.toggle('selected');
+                        
+                        // Update selected challenges data
+                        const selectedChallenges = JSON.parse(issueCard.dataset.selectedChallenges || '[]');
+                        const challengeText = this.textContent;
+                        
+                        if (this.classList.contains('selected')) {
+                            // Add challenge to selected list if not already there
+                            if (!selectedChallenges.includes(challengeText)) {
+                                selectedChallenges.push(challengeText);
+                            }
+                        } else {
+                            // Remove challenge from selected list
+                            const index = selectedChallenges.indexOf(challengeText);
+                            if (index !== -1) {
+                                selectedChallenges.splice(index, 1);
+                            }
+                        }
+                        
+                        // Update dataset
+                        issueCard.dataset.selectedChallenges = JSON.stringify(selectedChallenges);
+                        
+                        // Update card selected state based on whether any challenges are selected
+                        if (selectedChallenges.length > 0) {
+                            issueCard.classList.add('selected');
+                        } else {
+                            issueCard.classList.remove('selected');
+                        }
+                    });
+                    
+                    challengesList.appendChild(challengeTag);
                 });
                 
                 const impactTitle = document.createElement('div');