How to inlude multiple barcodes inside of the svg file

Question

I want to create a svg file with some bar codes inside. So I have tried

<svg width="400" height="202" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

 <g>
  <title>Layer 1</title>
 </g>

<svg id="barcode1"></svg>
<svg id="barcode2"></svg>
<svg id="barcode3"></svg>
 
<script xlink:href="https://cdn.jsdelivr.net/npm/[email protected]/dist/barcodes/JsBarcode.code128.min.js"></script>
<script>
JsBarcode("#barcode1", "Hi!");
</script>
</svg>

So I get " Uncaught TypeError: document.createElement(...).getContext is not a function" It doesn't seem to work inside of the svg file, so how can I achieve that?