javascript/jquery toggle an element for each list item

I do a for loop in javascript to get the title and description for each item in my json file.

for (var i = 0, len = mydata.texts.length; i < len; i++) {
    list +="<li>"+"<div class='circle'></div>" + 
         "<span onclick='toggleDesc()'>"+ mydata.texts[i]["keyword"] +
         "</span>"+
        +"</li>"+
        "<div id='descr'>"+mydata.texts[i]["description"]+"</div>";    
}


function toggleDesc() {
    var x = document.getElementById('descr');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}

The result is like:

1. Title1
   description1
2. title2
   description2
3. Title3
   Description3
...

Currently:
it is only toggling the first list item.

question

How can I fix it to show each list item's description on click?