Variable is not defined Javascript + Parse.com

I have a big problem. (Line: 40)

I want to create an input button by JS where attribute onclick is a function with one parameter. "onclick = goGrupa(gid)". This not working. "Uncaught ReferenceError: gid is not defined".

Next step is function goGrupa(id) - 1 parameter and I need only show him in console.log now.

What's the problem?

Javascript Code:

Parse.initialize("xxx", "xxx");
var currentUser = Parse.User.current();

$(document).ready(function(){
    WyszukajPrzedmioty();
});

function WyszukajPrzedmioty(){
   var zapPrzedmioty = new Parse.Query(new Parse.Object.extend("Przedmioty"));
   var output = "<ul>";
   zapPrzedmioty.include("grupy");

   zapPrzedmioty.equalTo("uczelnia",currentUser.get("nazwaUczelni"));
   zapPrzedmioty.equalTo("kierunek",currentUser.get("kierunek"));
   zapPrzedmioty.equalTo("rok",currentUser.get("rok"));
   zapPrzedmioty.find({
    success:function(przedmioty){
        for (var i in przedmioty){
            console.log(i+ " przedmiot: "+przedmioty[i]);
            var nazwaPrzedmiotu = przedmioty[i].get("nazwaPrzedmiotu");
            var kierunek = przedmioty[i].get("kierunek");
            var rok = przedmioty[i].get("rok");

            output += "<li><div id=\"naglowek\">";
      output += "<p><b style=\"font-size:20px; text-transform: uppercase;\">"+nazwaPrzedmiotu+"</b><br></p>";
      output += "<i>"+kierunek+"</i>, rok: <i>"+rok+"</i><br>";
      output += "</div>";

            var g = przedmioty[i].get("grupy");
            if (g.length > 0){
                output += "<br><b style=\"font-size: 20px;\"> Grupy: </b>";
                output += "<table>"
                console.log("Znaleziono grupy.");
                for (var j in g){
                    var dziekanska = g[j].get("dziekanska");
                    var gid = g[j].id;
                    if (g[j].get("lab") == 5){
                        var lab = "nie dotyczy";
                        output += "<tr><td class=\"left\">Dziekańska: "+dziekanska+"</td>";
                        output += "<td class=\"right\"><input type=\"button\" value=\"Dołącz\" onclick=goGrupa(gid)></td></tr>";
                    }
                    else{
                        var lab = g[j].get("lab");
                        output += "<tr><td class=\"left\">Dziekańska: "+dziekanska+", lab: "+lab+"</td>";
  // HERE IS THE PROBLEM \/
                        output += "<td class=\"right\"><input type=\"button\" value=\"Dołącz\" onclick=goGrupa(gid)></td></tr>";
                    }


                    console.log (j+" grupa: "+dziekanska+" "+lab+" id: "+gid);
                }
                output += "</table>";
            }
            else{
                console.log("Nie ma grup");
                output += "</li>";
            }
        }
        $("#listaPrzedmiotowStudent").html(output + "</ul>");
    },
    error:function(e){
        console.log(e.message);
    }
});
}
function goGrupa(gid){
  console.log(gid);
}

And screen:

I try change this on:

onclick=\"goGrupa("+gid+")\", onclick=\"goGrupa(gid)\", onclick=goGrupa("+gid+"), onclick=goGrupa(gid)

and nothing.