diff --git a/allstarr/wwwroot/index.html b/allstarr/wwwroot/index.html
index e33f7ed..28e2a3d 100644
--- a/allstarr/wwwroot/index.html
+++ b/allstarr/wwwroot/index.html
@@ -1614,15 +1614,15 @@
                         statusBadge = '<span class="status-badge success" style="font-size:0.75rem;padding:2px 8px;margin-left:8px;"><span class="status-dot"></span>Local</span>';
                     } else if (t.isLocal === false) {
                         statusBadge = '<span class="status-badge warning" style="font-size:0.75rem;padding:2px 8px;margin-left:8px;"><span class="status-dot"></span>External</span>';
-                        // Add manual map button for external tracks
-                        // Use JSON.stringify to properly escape strings for JavaScript
-                        const escapedName = JSON.stringify(name);
-                        const escapedTitle = JSON.stringify(t.title || '');
-                        // Safely get first artist, defaulting to empty string
+                        // Add manual map button for external tracks using data attributes
                         const firstArtist = (t.artists && t.artists.length > 0) ? t.artists[0] : '';
-                        const escapedArtist = JSON.stringify(firstArtist);
-                        const escapedSpotifyId = JSON.stringify(t.spotifyId || '');
-                        mapButton = `<button class="small" onclick="openManualMap(${escapedName}, ${t.position}, ${escapedTitle}, ${escapedArtist}, ${escapedSpotifyId})" style="margin-left:8px;font-size:0.75rem;padding:4px 8px;">Map to Local</button>`;
+                        mapButton = `<button class="small map-track-btn" 
+                            data-playlist-name="${escapeHtml(name)}" 
+                            data-position="${t.position}" 
+                            data-title="${escapeHtml(t.title || '')}" 
+                            data-artist="${escapeHtml(firstArtist)}" 
+                            data-spotify-id="${escapeHtml(t.spotifyId || '')}" 
+                            style="margin-left:8px;font-size:0.75rem;padding:4px 8px;">Map to Local</button>`;
                     }
                     
                     return `
@@ -1639,6 +1639,18 @@
                         </div>
                     `;
                 }).join('');
+                
+                // Add event listeners to map buttons
+                document.querySelectorAll('.map-track-btn').forEach(btn => {
+                    btn.addEventListener('click', function() {
+                        const playlistName = this.getAttribute('data-playlist-name');
+                        const position = parseInt(this.getAttribute('data-position'));
+                        const title = this.getAttribute('data-title');
+                        const artist = this.getAttribute('data-artist');
+                        const spotifyId = this.getAttribute('data-spotify-id');
+                        openManualMap(playlistName, position, title, artist, spotifyId);
+                    });
+                });
             } catch (error) {
                 document.getElementById('tracks-list').innerHTML = '<p style="text-align:center;color:var(--error);padding:40px;">Failed to load tracks</p>';
             }