title: How to display dynamically generated buttons vertically with spaces in between them
body: <p>I am using this button to generate other buttons one by one when clicked</p>
  <pre><code>&lt;div class=&quot;col&quot;&gt;
      &lt;button type=&quot;button&quot; id=&quot;btClone&quot;  class=&quot;btn btn-primary&quot; @onclick=&quot;@ProcessNow&quot;&gt;Add Button&lt;/button&gt; 
  &lt;/div&gt;
  </code></pre>
  <p>Here is the div I am using to store the generated buttons.</p>
  <pre><code>div class=&quot;row &quot;&gt;
      &lt;div class=&quot;col&quot;&gt;
          &lt;div id=&quot;container2&quot; style=&quot;display:none;&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Here is the Javascript/Jquery that is doing the work. I am able to provide a name
  for the button</p>
  <pre><code>function ProcessNow() {
      var retVal = prompt(&quot;Enter Name : &quot;, &quot;name here&quot;);
      if (retVal !== null &amp;&amp; retVal !== '') {
          $('#btClone')
              .clone()
              .attr('id', 'starter' + iCnt)
              .appendTo(&quot;#container2&quot;);
  
      $(&quot;#starter&quot; + iCnt).html(retVal);
  
          $(&quot;#container2&quot;).attr('style', 'border:solid 1px #555;');
          iCnt = iCnt + 1;
          }
  }
  </code></pre>
  <p>Here are the issues I am facing</p>
  <ol>
  <li><p>Everything works fine but the buttons are generated horizontally and I want them arranged
  vertically with spaces in between them. How can this be achieved?</p>
  </li>
  <li><p>How do I change the colors of the generated buttons?</p>
  </li>
  </ol>