Scope is not the issue, you just need something to distinguish the different img
tags.
there is a dynamic way but it is so much less difficult to simply modify the template and give img
s different IDs
To make it a little easier, I have put the img ID's into a constant at the top of the function.
So when you add a 3rd one, you change the img
id and the const
e.g..
<div class="camera-container">
<img id="img1" src="" name="camera"> <!-- ā set the id -->
</div>
<script>
(function(scope) {
const imgID = "img1"; // ā set the id same as img id above
var url = "https://picsum.photos/200/300";
var interval = 1000;
//...
//... rest of the code
//...
demo
updated flow...
[{"id":"e56cb027.484f1","type":"ui_template","z":"5e566ed8.e8b42","group":"a63b29d.f4c81d8","name":"","order":0,"width":"12","height":"9","format":"<div class=\"camera-container\">\n <img id=\"img1\" src=\"\" name=\"camera\">\n</div>\n<script>\n(function(scope) {\n const imgID = \"img1\";\n var url = \"https://picsum.photos/200/300\";\n var interval = 1000;\n var timer = null;\n scope.$watch('msg', function(msg) {\n if (msg) {\n debugger\n if(msg.topic === \"setURL\") url = msg.payload;\n if(msg.topic === \"setInterval\") {\n stop();\n interval = Number(msg.payload);\n start();\n }\n if(msg.topic === \"stop\") stop();\n if(msg.topic === \"start\") start();\n }\n });\n function start() {\n debugger\n if(isNaN(interval) == false && interval > 0) {\n timer = setInterval(loadNewImage, interval);\n } else {\n console.warn(\"interval is valid\");\n }\n }\n function stop() {\n if(timer) {\n clearInterval(timer);\n timer = null;\n }\n }\n function loadNewImage() {\n if(url) {\n let time = new Date().getTime().toLocaleString().replace(/,/g,\"\");\n //let time Date.now(); //use epoch as an alternative\n $(\"#\" + imgID).attr(\"src\", `${url}?time=${time}`);\n }\n }\n\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":800,"y":360,"wires":[[]]},{"id":"b1160200.58ac5","type":"inject","z":"5e566ed8.e8b42","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"stop","payload":"","payloadType":"date","x":596,"y":296,"wires":[["e56cb027.484f1"]]},{"id":"cb4b8ed3.53d22","type":"inject","z":"5e566ed8.e8b42","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"start","payload":"","payloadType":"date","x":596,"y":344,"wires":[["e56cb027.484f1"]]},{"id":"384b9999.113856","type":"inject","z":"5e566ed8.e8b42","name":"setURL unsplash","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"setURL","payload":"https://source.unsplash.com/random/300x200","payloadType":"str","x":596,"y":392,"wires":[["e56cb027.484f1"]]},{"id":"4384464e.6c2748","type":"inject","z":"5e566ed8.e8b42","name":"setURL picsum","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"setURL","payload":"https://picsum.photos/200/300","payloadType":"str","x":596,"y":440,"wires":[["e56cb027.484f1"]]},{"id":"d375b4d.0c86348","type":"ui_template","z":"5e566ed8.e8b42","group":"a63b29d.f4c81d8","name":"","order":0,"width":"12","height":"9","format":"<div class=\"camera-container\">\n <img id=\"img2\" src=\"\" name=\"camera\">\n</div>\n<script>\n(function(scope) {\n const imgID = \"img2\";\n var url = \"https://picsum.photos/200/300\";\n var interval = 1000;\n var timer = null;\n scope.$watch('msg', function(msg) {\n if (msg) {\n debugger\n if(msg.topic === \"setURL\") url = msg.payload;\n if(msg.topic === \"setInterval\") {\n stop();\n interval = Number(msg.payload);\n start();\n }\n if(msg.topic === \"stop\") stop();\n if(msg.topic === \"start\") start();\n }\n });\n function start() {\n debugger\n if(isNaN(interval) == false && interval > 0) {\n timer = setInterval(loadNewImage, interval);\n } else {\n console.warn(\"interval is valid\");\n }\n }\n function stop() {\n if(timer) {\n clearInterval(timer);\n timer = null;\n }\n }\n function loadNewImage() {\n if(url) {\n let time = new Date().getTime().toLocaleString().replace(/,/g,\"\");\n //let time Date.now(); //use epoch as an alternative\n $(\"#\" + imgID).attr(\"src\", `${url}?time=${time}`);\n }\n }\n\n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":800,"y":560,"wires":[[]]},{"id":"bacba6b3.bd1ac8","type":"inject","z":"5e566ed8.e8b42","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"stop","payload":"","payloadType":"date","x":596,"y":496,"wires":[["d375b4d.0c86348"]]},{"id":"c2b974ea.c8ec08","type":"inject","z":"5e566ed8.e8b42","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"start","payload":"","payloadType":"date","x":596,"y":544,"wires":[["d375b4d.0c86348"]]},{"id":"e774b53e.254218","type":"inject","z":"5e566ed8.e8b42","name":"setURL unsplash","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"setURL","payload":"https://source.unsplash.com/random/300x200","payloadType":"str","x":596,"y":592,"wires":[["d375b4d.0c86348"]]},{"id":"50154eec.61267","type":"inject","z":"5e566ed8.e8b42","name":"setURL picsum","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"setURL","payload":"https://picsum.photos/200/300","payloadType":"str","x":596,"y":640,"wires":[["d375b4d.0c86348"]]},{"id":"a63b29d.f4c81d8","type":"ui_group","name":"Form","tab":"4bed3390.45d6dc","order":1,"disp":true,"width":"15","collapse":false},{"id":"4bed3390.45d6dc","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]