diff --git a/web/app/src/components/jobs/JobDetails.vue b/web/app/src/components/jobs/JobDetails.vue
index b2fc8aa0..09ae7fe8 100644
--- a/web/app/src/components/jobs/JobDetails.vue
+++ b/web/app/src/components/jobs/JobDetails.vue
@@ -30,7 +30,7 @@
       <TabItem title="Details">
         <dl>
           <dt class="field-name" title="ID">ID</dt>
-          <dd>{{ jobData.id }}</dd>
+          <dd><span @click="copyElementText" class="click-to-copy">{{ jobData.id }}</span></dd>
 
           <dt class="field-name" title="Name">Name</dt>
           <dd>{{ jobData.name }}</dd>
@@ -73,6 +73,7 @@ import LastRenderedImage from '@/components/jobs/LastRenderedImage.vue'
 import Blocklist from './Blocklist.vue'
 import TabItem from '@/components/TabItem.vue'
 import TabsWrapper from '@/components/TabsWrapper.vue'
+import { copyElementText } from '@/clipboard';
 
 export default {
   props: [
@@ -90,6 +91,7 @@ export default {
   data() {
     return {
       datetime: datetime, // So that the template can access it.
+      copyElementText: copyElementText,
       simpleSettings: null, // Object with filtered job settings, or null if there is no job.
       jobsApi: new API.JobsApi(apiClient),
       jobType: null, // API.AvailableJobType object for the current job type.
diff --git a/web/app/src/components/jobs/TaskDetails.vue b/web/app/src/components/jobs/TaskDetails.vue
index b65e713b..2089e6b5 100644
--- a/web/app/src/components/jobs/TaskDetails.vue
+++ b/web/app/src/components/jobs/TaskDetails.vue
@@ -4,7 +4,7 @@
   <template v-if="hasTaskData">
     <dl>
       <dt class="field-id" title="ID">ID</dt>
-      <dd>{{ taskData.id }}</dd>
+      <dd><span @click="copyElementText" class="click-to-copy">{{ taskData.id }}</span></dd>
 
       <dt class="field-name" title="Name">Name</dt>
       <dd>{{ taskData.name }}</dd>
@@ -76,6 +76,7 @@ import { backendURL } from '@/urls';
 import { apiClient } from '@/stores/api-query-count';
 import { useNotifs } from "@/stores/notifications";
 import LinkWorker from '@/components/LinkWorker.vue';
+import { copyElementText } from '@/clipboard';
 
 export default {
   props: [
@@ -88,6 +89,7 @@ export default {
   data() {
     return {
       datetime: datetime, // So that the template can access it.
+      copyElementText: copyElementText,
       jobsApi: new JobsApi(apiClient),
       notifs: useNotifs(),
     };