title: Dynamically create array of buttons
body: <p>I'm trying to dynamically create a list of buttons from an array. The first part of each element pair contains the button value and the second part contains the button name.</p>
  
  <p>This is the code I have so far which creates a list of buttons from the array but the names are not linked properly (the names appear next to the buttons, not in them)</p>
  
  <p>How do I correctly format this to do what I need?</p>
  
  <pre><code>&lt;head&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type=text/javascript&gt;
          setInterval(function() {
              $.getJSON('/_load_node', {
              }, function(data) {
                if(data.test_result == 1) {
                  $("div.value").html(data.test_result);
                  var newHTML = [];
                  for (var i = 0; i &lt; data.next_steps.length; i++) {
                      newHTML.push('&lt;p&gt;&lt;button type="submit" name="action" value = ' + data.next_steps[i][0] + ' /&gt;' + data.next_steps[i][1] + '&lt;/button&gt;');
                  }
                  $("div.button").html(newHTML.join(""));
                }
              return false;
            });
          }, 1000);
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="value"&gt;&lt;/div&gt;
  &lt;div class="button"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Inspecting the page, it looks like the buttons are being returned as <code>&lt;p&gt;&lt;button type="submit" name="action" value = value/&gt; &lt;/button&gt; name</code> which makes sense for them to be printed to the side. Is there a way to get this to return correctly?</p>