I'm struggling with dynamically creating buttons through a loop. I am new to this, so I'm not sure where I'm making a mistake. Here is what I have so far. Any suggestions?
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src='http://code.jquery.com/jquery-2.1.3.min.js'></script>
<script type="text/javascript"></script>
<script src="giphy.js"></script>
</head>
<body>
<div id="buttonDiv"></div>
<div id="gifsAppearHere"></div>
</body>
</html>
var topics = ['bikram', 'yoga', 'vegan', 'vegetarian','nutrition', 'exercise', 'pilates','calisthenics', 'ashtanga', 'vinyasa', 'utkatasana']
for (var i = 0; i < topics.length; i++) {
var buttons = $('<button>' + topics.text + '</button>')
buttons.append('topics');
}