Skip to content
Advertisement

How to display dynamically generated buttons vertically with spaces in between them

I am using this button to generate other buttons one by one when clicked

<div class="col">
    <button type="button" id="btClone"  class="btn btn-primary" @onclick="@ProcessNow">Add Button</button> 
</div>

Here is the div I am using to store the generated buttons.

div class="row ">
    <div class="col">
        <div id="container2" style="display:none;"></div>
    </div>
</div>

Here is the Javascript/Jquery that is doing the work. I am able to provide a name for the button

function ProcessNow() {
    var retVal = prompt("Enter Name : ", "name here");
    if (retVal !== null && retVal !== '') {
        $('#btClone')
            .clone()
            .attr('id', 'starter' + iCnt)
            .appendTo("#container2");

    $("#starter" + iCnt).html(retVal);

        $("#container2").attr('style', 'border:solid 1px #555;');
        iCnt = iCnt + 1;
        }
}

Here are the issues I am facing

  1. 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?

  2. How do I change the colors of the generated buttons?

Advertisement

Answer

.newBtn { display: block; }


iCnt = 0

function ProcessNow() {
  var retVal = prompt("Enter Name : ", "name here");
  if (retVal !== null && retVal !== '') {
    $('#btClone')
      .clone()
      .attr('id', 'starter' + iCnt)
      .addClass('newBtn')
      .appendTo("#container2");

    $("#starter" + iCnt).html(retVal);


    $("#container2").attr('style', 'border:solid 1px #555;');
    iCnt = iCnt + 1;
  }
}
.newBtn {
  background-color: red;
  margin-top: 10px;
  display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row ">
  <div class="col">
    <button type="button" id="btClone" class="btn btn-primary" onclick="ProcessNow()">Add Button</button>
  </div>
  <div class="col">
    <div id="container2" style="display:none;"></div>
  </div>
</div>
Advertisement