Multi QR Code Generation Error

[PNB007]

Here is my code

<title>QR Code Styling</title> <script type="text/javascript" src="https://unpkg.com/qr-code-styling@1.5.0/lib/qr-code-styling.js"></script>

<script type="text/javascript"> function generateQrCode(ctrlId, qrText) { qrCode = new QRCodeStyling({ width: 300, height: 300, type: "svg", data: qrText, margin:0, image: "https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg", qrOptions:{typeNumber:"0",mode:"Byte",errorCorrectionLevel:"Q"},

			dotsOptions: {
				color: "#000000",		// Black
				type: "dots"
			},
			cornersSquareOptions:{
				type:"extra-rounded",
				color:"#000080"
			},
			cornersSquareOptionsHelper:{
				colorType:{
					single:true,
					gradient:false
				},
				gradient:{
					linear:true,
					radial:false,
					color1:"#000000",
					color2:"#000000",
					rotation:"0"
				}
			},
			cornersDotOptions: {
				color: "#000080",		// Navy Blue
				type: "dots"
			},
			cornersDotOptionsHelper:{
				colorType:{
					single:true,
					gradient:false
				},
				gradient:{
					linear:true,
					radial:false,
					color1:"#000000",
					color2:"#000000",
					rotation:"0"
				}
			}
		});
		qrCode.clear;
		qrCode.append(document.getElementById(ctrlId));
	}
	var html = "";
	for (let i = 1; i < 10; i++) {
		html += '<div id="canvas'+i+'"></div><br>';
	}
	var xx = document.getElementById("qr_content");
	xx.innerHTML = html;
	
	var odd = "pushpenbanerjee@yahoo.com\n720, Bijay Ch. Das Road\nSainpala, Basirhat-743411\nNorth 24 Parganas, WB, India";
	var even = "pushpenbanerjee@gmail.com\nPanitor, Itinda1\nNorth 24 Parganas, Mobile:8609312084";
	for (let i = 1; i < 10; i++) {
		var yy = document.getElementById('"canvas"'+i+'"');
		if(i%2 == 0){
			qrText = even;
		}else{
			qrText = odd;
		}
		generateQrCode("canvas"+i, qrText);
	}
</script>

Only odd row QR Code are shown correctly but even row QR Code not shown properly. Please Solve it.
Thank You.