Submit requirements - fix hovercard issue

When submit requirement name has special characters like `~`,
hovercard throws error.

Change-Id: Id47444e1e799a3b1d722a86c58a699b4bdf3662a
diff --git a/polygerrit-ui/app/elements/change/gr-submit-requirements/gr-submit-requirements.ts b/polygerrit-ui/app/elements/change/gr-submit-requirements/gr-submit-requirements.ts
index 724d803..5b6a195 100644
--- a/polygerrit-ui/app/elements/change/gr-submit-requirements/gr-submit-requirements.ts
+++ b/polygerrit-ui/app/elements/change/gr-submit-requirements/gr-submit-requirements.ts
@@ -31,6 +31,7 @@
   iconForStatus,
 } from '../../../utils/label-util';
 import {fontStyles} from '../../../styles/gr-font-styles';
+import {charsOnly} from '../../../utils/string-util';
 
 @customElement('gr-submit-requirements')
 export class GrSubmitRequirements extends LitElement {
@@ -117,7 +118,9 @@
         </thead>
         <tbody>
           ${submit_requirements.map(
-            requirement => html`<tr id="requirement-${requirement.name}">
+            requirement => html`<tr
+              id="requirement-${charsOnly(requirement.name)}"
+            >
               <td>${this.renderStatus(requirement.status)}</td>
               <td class="name">
                 <gr-limited-text
@@ -134,7 +137,7 @@
       ${submit_requirements.map(
         requirement => html`
           <gr-submit-requirement-hovercard
-            for="requirement-${requirement.name}"
+            for="requirement-${charsOnly(requirement.name)}"
             .requirement="${requirement}"
             .change="${this.change}"
             .account="${this.account}"