JSFiddle - React, Tailwind, and code Playground

by Muthuraman B

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="col-md-4 col-sm-4 col-xs-4 mt15">
  <input type="number" id="number" class="form-control">
</div>
<div class="col-md-8 col-sm-8 col-xs-8 mt15">
  <button class="btn" id="btn">Click Here</button>
</div>
<div id="maindiv" class="col-md-12 col-sm-12 col-xs-12 mt15"> 
</div>

CSS

.btn {width:100%;}
.mt15 {margin-top:15px;}

JavaScript

$('#btn').click( function(){ 
  for (var i = 1; i <= $('#number').val(); i++)
  {
    var value=""
    for (var j = 1; j <= i; j++)
    {
      value +=j+" ";
    }
    $("#maindiv").append("<p id='p"+i+""+j+"'>"+value+"</p>");
  }      
});