Double canvas QR Code

i have situation where i use 2 modal to showing 2 QR code, modal A and modal B, in modal A i get success to showing QR Code in container modal. But, problem in modal B preview QR not in center, i see on inspect element canvas has double created in modal B so QR move to buttom having blank space in top like this:
QR Modal B

here the code in javascript show QR in modal B, where show modal from datatable href link:

$(function QR() {
$.ajax({
url: "servgenqr",
dataType: "json",
method: "GET",
success: function(response) {
$('.QRTable').dataTable({
data: response,
retrieve: true,
paging: true,
searching: true,
destroy: false,
language: {
searchPlaceholder: "Search records"
},
columns: [{
'data': 'amount'
},
{
'data': 'date'
},
{
"data": "codeQR",
"render": function(data, type, row, meta) {
if (type === 'display') {
var showqrcode = new QRCode(document.getElementById("qcodeQR"), {
width: 200,
height: 200
});
$("#qrlink").click(function() {

showqrcode.makeCode(data);
});
column = '<a id="qrlink" href="#showQR" class="fa fa-qrcode" data-toggle="modal" data-target="#showQR" style="font-size: 1.6em;"></a>';
}
return column;
}
}
]
});
$(".dataTables_filter input").addClass("form-control");
$(".dataTables_length select").addClass("form-control");
},
error: function(jqXHR, textStatus, errorThrown) {}
});
//setTimeout(startRefresh,1000);
});


here the code javascript to show modal A, where show modal from button:

var qrcode = new QRCode(document.getElementById("qrcode"), {
width: 200,
height: 200
});

function makeCode() {
qrcode.makeCode(makeQR());
}

$("#submit").click(
function() {
var amount = $("#amountField").val();
var qrcode = makeQR();

if (amount == '' || amount == null || amount == 0) {
$('#amountField').focus();
$('.error-message').show();
} else {
$('.error-message').hide();
$.ajax({
type: "POST",
data: {
Email: amount,
Pass: qrcode
},
url: "Transaction",
success: function(resp) {
makeCode();
$('#newQR').modal('show');
$("#success-alert").show();
setTimeout(function() {
$("#success-alert").slideUp(500);
}, 2000);
},
error: function(resp) {
makeCode();
$('#newQR').modal('show');
$("#success-alert").show();
$("#failed-alert").show();
setTimeout(function() {
$("#failed-alert").slideUp(500);
}, 2000);
}
});
}
});


how to remove double canvas, or clue to solved this, thank you..

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.