Fix for approval check popover bug

- when multiple `ApprovalCheckPopover` components exists,
  the popovers do not attach to the correct icon
- add title to `id` to make the id unique

Changelog: fixed
EE: true

ee/app/assets/javascripts/approvals/components/approval_check_popover.vue

@@ -35,14 +35,14 @@ export default {
 <template>
   <span class="vertical-align-middle text-muted js-help ml-2">
     <gl-icon
-      id="reportInfo"
+      :id="'reportInfo' + title"
       name="question"
       class="author-link suggestion-help-hover"
       :aria-label="__('help')"
       :size="14"
       data-testid="icon2"
     />
-    <gl-popover target="reportInfo" placement="top" :title="title">
+    <gl-popover :target="'reportInfo' + title" placement="top" :title="title">
       <div class="mb-2">{{ text }}</div>
       <gl-link v-if="documentationLink" target="_blank" :href="documentationLink">
         <span class="vertical-align-middle">{{ documentationText }}</span>

ee/spec/frontend/approvals/components/approval_check_rule_popover_spec.js

@@ -60,7 +60,7 @@ describe('Approval Check Popover', () => {
     });
 
     describe('approvalConfig', () => {
-      it('returns "Vulberability-Check" config', (done) => {
+      it('returns "Vulnerability-Check" config', (done) => {
         wrapper.setProps({ rule: { name: VULNERABILITY_CHECK_NAME } });
         Vue.nextTick(() => {
           expect(wrapper.vm.approvalRuleConfig.title).toBe(