How can i get custom data attribute

I can get the value of id but data-id shows this error,

Uncaught ReferenceError: id is not defined

My code,

<ul id="highscores"></ul>
<script>
var hst = document.getElementById("highscores");

var highScores = [
    { id: "1",name: "Maximillian", score: 1000 },
    { id: "2",name: "The second guy", score: 700 },
    { id: "3",name: "The newbie!", score: 50 }
];

function deleteById ( self ){
    console.log(self.id);
    console.log(self.data-id);
}
for (var i = 0; i < highScores.length; i++) {
        hst.innerHTML +=
        "<li >" +"<a data-id='test' id="+highScores[i].id + " href='#' onclick='deleteById(this)'>x</a>" +
        highScores[i].name +
        " -- " +
        highScores[i].score +
        "</li>";
    }
</script>