5437e4cdda97aaa2c5e547fb1e6bd15b086f8464
jcasper
  Mon Oct 21 10:14:15 2024 -0700
Fix for subtrack color pickers all being placed in the same div, refs #34476

diff --git src/hg/lib/hui.c src/hg/lib/hui.c
index dce6707..1fb6ff9 100644
--- src/hg/lib/hui.c
+++ src/hg/lib/hui.c
@@ -6024,32 +6024,33 @@
 char *onlyTransStr = cartUsualString(cart, varName, "");
 
 cgiMakeTextVar(varName, onlyTransStr, 60);
 printf("&nbsp;<small>Separate multiple accessions with commas</small>");
 puts("</DIV>\n\n");
 }
 
 void colorTrackOption(struct cart *cart, char *name, struct trackDb *tdb)
 /* color picker for overriding track color */
 {
 char varName[1024];
 safef(varName, sizeof(varName), "%s.colorOverride", name);
 
 char *colorValue = cartUsualString(cart, varName, "");
 
-puts("&nbsp;<div id='colorPicker'>");
-jsInlineF("makeHighlightPicker('%s', document.getElementById('colorPicker'), '%s', 'Change track color:', '%s');", varName, name, colorValue); // id="xx" is necessary as id contains a dot
+printf("&nbsp;<div id='colorPicker_%s'>", name);
+jsInlineF("makeHighlightPicker('%s', document.getElementById('colorPicker_%s'), '%s', 'Change track color:', '%s');",
+        varName, name, name, colorValue); // id="xx" is necessary as id contains a dot
 puts("</div>\n\n");
 }
 
 void wiggleScaleDropDownJavascript(char *name)
 /* print some js that deactivates the min/max range if autoscaling is activated */
 {
 struct dyString *dy = dyStringNew(1024);
 dyStringPrintf(dy, "  $(\"[name='%s.autoScale']\").change(function()\n", name);
 dyStringPrintf(dy, "  {\n");
 dyStringPrintf(dy, "  val= $(this).find(':selected').val(); \n");
 dyStringPrintf(dy, "  if (val!=\"use vertical viewing range setting\")\n");
 dyStringPrintf(dy, "     {\n");
 dyStringPrintf(dy, "     $(\"[name='%s.minY']\")[0].disabled=true;\n", name);
 dyStringPrintf(dy, "     $(\"[name='%s.maxY']\")[0].disabled=true;\n", name);
 dyStringPrintf(dy, "     $(\".%sAutoScaleDesc\").attr('style', 'color:grey;');\n", name);