diff --git a/web_src/js/markup/codecopy.ts b/web_src/js/markup/codecopy.ts
index 819b2b54746..3e373f62a22 100644
--- a/web_src/js/markup/codecopy.ts
+++ b/web_src/js/markup/codecopy.ts
@@ -1,9 +1,10 @@
 import {svg} from '../svg.ts';
-import {createElementFromAttrs, queryElems} from '../utils/dom.ts';
+import {createElementFromAttrs, generateElemId, queryElems} from '../utils/dom.ts';
 
 export function makeCodeCopyButton(attrs: Record<string, string> = {}): HTMLButtonElement {
   const btn = createElementFromAttrs<HTMLButtonElement>('button', {
     class: 'ui compact icon button code-copy auto-hide-control',
+    type: 'button',
     ...attrs,
   });
   btn.innerHTML = svg('octicon-copy');
@@ -11,13 +12,11 @@ export function makeCodeCopyButton(attrs: Record<string, string> = {}): HTMLButt
 }
 
 export function initMarkupCodeCopy(elMarkup: HTMLElement): void {
-  // .markup .code-block code
   queryElems(elMarkup, '.code-block code', (el) => {
-    if (!el.textContent) return;
-    // remove final trailing newline introduced during HTML rendering
-    const btn = makeCodeCopyButton({
-      'data-clipboard-text': el.textContent.replace(/\r?\n$/, ''),
-    });
+    // the code block's content can change (e.g.: debian package page: select different distributions),
+    // so use "data-clipboard-target" to copy the target's textContent, also always respect the content's end of block newline.
+    if (!el.getAttribute('id')) el.setAttribute('id', generateElemId('_code_block_'));
+    const btn = makeCodeCopyButton({'data-clipboard-target': `#${CSS.escape(el.getAttribute('id')!)}`});
     // we only want to use `.code-block-container` if it exists, no matter `.code-block` exists or not.
     const btnContainer = el.closest('.code-block-container') ?? el.closest('.code-block')!;
     btnContainer.append(btn);