Fix client load on dev server pages without toggle button

The toggle button only exists on the index page. Also I fixed an issue
where an incorrect variable name went unnoticed due to DOM element IDs
creating global variables (sigh).

dev-server/serve-dev.js

@@ -29,19 +29,22 @@ function renderScript(context) {
   const scriptTemplate = `
     {{{hypothesisConfig}}}
     <script>
-    const toggleClientButton = document.querySelector('#toggleClient');
+
+    // Button to load/unload the client. Not present on all pages so we create
+    // a dummy one if missing.
+    const toggleClientButton = document.querySelector('.js-toggle-client') || document.createElement('button');
 
     function loadClient() {
       const embedScript = document.createElement('script');
       embedScript.src = '{{{clientUrl}}}'.replace('{current_host}', document.location.hostname);
       document.body.appendChild(embedScript);
-      toggleClient.textContent = 'Unload client';
+      toggleClientButton.textContent = 'Unload client';
     }
 
     function unloadClient() {
       const annotatorLink = document.querySelector('link[type="application/annotator+html"]');
       annotatorLink?.dispatchEvent(new Event('destroy'));
-      toggleClient.textContent = 'Load client';
+      toggleClientButton.textContent = 'Load client';
     }
 
     toggleClientButton.onclick = () => {

dev-server/templates/index.mustache

@@ -40,7 +40,7 @@
   <button data-hypothesis-trigger>
     Open sidebar
   </button>
-  <button id="toggleClient">Load client</button>
+  <button class="js-toggle-client">Load client</button>
   <h2>Useful links</h2>
   <ul>
     <li><a href="https://github.com/hypothesis/client">GitHub project</a></li>