**Steps to replicate the issue** (include links if applicable):
* Go to https://en.wikipedia.org/wiki/Special:Blankpage
* Run this to create 2 CodeMirror instances:
```lang=js
const require = await mw.loader.using('ext.CodeMirror.v6');
const CodeMirror = require('ext.CodeMirror.v6');
const textarea1 = $('<textarea>').attr('rows', 10)[0];
$('.mw-body-content').append(textarea1);
const cm1 = new CodeMirror(textarea1);
cm1.initialize();
const textarea2 = $('<textarea>').attr('rows', 10)[0];
$('.mw-body-content').append(textarea2);
const cm2 = new CodeMirror(textarea2);
cm2.initialize();
```
* Press Ctrl+Shift+, to open preferences in each one
* Click the //label// of the checkbox "Show line numbers" (not the checkbox itself!)
**What happens?**:
{F65993132}
**What should have happened instead?:**
Probably the preferences of two forms should be kept in sync by doing the same sync procedure as CodeMirrorChild does on `ext.CodeMirror.preferences.apply` hook? I guess a case could be made for having two instances of CodeMirror with different preferences, but seems far-fetched to me? (E.g. in VS Code you can't have different word wrap settings across tabs.)
**Technical details**:
The cause is the fact that the checkbox inputs they have the same input IDs assigned in [[https://github.com/wikimedia/mediawiki-extensions-CodeMirror/blob/6311920da97bbce7e849fda605811944a673d92c/resources/codemirror.codex.js#L121|codemirror.codex.js#L121]].
Note that the second checkbox is changed not directly by the click, but by the means of the hook in [[https://github.com/wikimedia/mediawiki-extensions-CodeMirror/blob/6311920da97bbce7e849fda605811944a673d92c/resources/codemirror.preferences.js#L614|codemirror.preferences.js#L614]]
```lang=js
// Update the checked state when the preference is changed.
mw.hook( 'ext.CodeMirror.preferences.apply' ).add( ( pref, enabled ) => {
if ( pref === name ) {
input.checked = enabled;
}
} );
```