Same JS code can't be run twice on Qualtrics survey

Hi, I have a survey to be run that contains a dice roll task. The task is to be done twice by the same person, i.e., click a button to "roll" a dice then selecting an option to report the value that appears on the dice pic. The exact same JS code is used in two blocks of questions, and the two blocks are randomized. I previewed the whole thing for several times. The first task worked out well, but the second time, clicking the button just did not work and no number was shown on the dice pic. I pasted the question content and the JS code here, which are identical for both questions in which the task appears. The funny thing is, when I tried to next on the second task without selecting a value (which of course did not let me to because reporting a value was made "required") then reclick the button, the roll worked! I have no idea.

!


Qualtrics.SurveyEngine.addOnload(function()
{
var container_div = document.getElementById("container");
var dice_button = document.getElementById("dice_button");
var dice_container_div = document.getElementById("dice_container");

function randomIntFromInterval(min,max) {
return Math.floor(Math.random()*(max-min+1)+min);
}
function roll_dice(dice_button, container_div, dice_container_div){
dice_button.onclick = function(){
var outcome = randomIntFromInterval(1,6);
var dice_pic_id = "dice_" + String(outcome) + ".jpeg";
var dice_link = "https://www.sas.upenn.edu/~jdorsett/experiment_pics/hannah/" + dice_pic_id;
var dice_pic = document.createElement("img");
dice_button.setAttribute("disabled", "disabled");
dice_pic.setAttribute('src', dice_link)
dice_pic.setAttribute('height', '300px');
dice_pic.setAttribute('width', '300px');
dice_container_div.appendChild(dice_pic);
container_div.style.display = 'none';

}
}
roll_dice(dice_button, container_div, dice_container_div);
});