Load html div tags containing onlick before method that onlick calls

1

Hi there,
I have been stuck on this for a long time now, and asking for help was the only option left:
In my Voting Application index.js: https://glitch.com/edit/#!/voting-application-fcc?path=views/index.ejs:124:33

function renderPollData(pollId)
 {
   $.get('/renderPoll?pollId=' + pollId.id, function(data, status)
   {
     $("#donutchart").ready(function() 
     {
       loadChart(data);
     });
       $("#body-jumbotron").html("<div id='donutchart' style='width: 900px; height: 500px;'></div><div id='votingDiv'><button class='btn btn-primary' onclick=vote("+data+")>Vote</button></div>");
       
   });
 }

As soon as I get the pollData from my /renderPoll?pollId=xyz service, the <div id='donutchart' should load first, and then the Vote button created should send over the data received, to the /vote service. But as soon as my Vote button is loaded, and I click it,

Chrome console shows me this error:
Uncaught SyntaxError: Unexpected token }

which I do not understand why, does not work, the vote button should send the data(POST) to the /vote microservice but it does not. I would really appreciate if I could get some help on this. :frowning: