title: Javascript, sorting numbers in particular oreder
body: <p>I am trying to make table that consist of columns and rows. User type how many rows and columns want and on button click and table is created. My problem is to get numbers sorteed in circular way, lowest in bottom right corner and highest in the middle?</p>
  
  <p>This is what i created so far </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.submit').click(function() {
  
    var numVal = $('.num').val();
    var otherVal = $('.num2').val();
    var sum = eval(numVal * otherVal);
    var numbers = [];
  
    for (var i = 1; i &lt;= sum; i++) {
      numbers.push(i)
    }
  
    for (var i = 0; i &lt; numbers.length; i++) {
      $('ul').prepend('&lt;li&gt;' + numbers[i] + '&lt;/li&gt;')
    }
  
    var containerWidth = $('.container').width(numVal * 46 + 'px')
    $('.container').height(otherVal * 46 + 'px')
    $('.wrapper').width(containerWidth + 250 + 'px')
    var middle = numbers[Math.round(($('li').length - 1) / 2)];
  });
  
  $('.clear').click(function() {
    $('ul').html('');
    $('.num, .num2').val('').focus();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
  }
  .container {
    max-width: 230px;
  }
  .container:after {
    content: "";
    display: block;
    clear: both;
  }
  ul {} ul:after {
    content: "";
    display: block;
    clear: both;
  }
  li {
    list-style: none;
    width: 40px;
    line-height: 40px;
    margin: 3px;
    background: #ccc;
    border-radius: 5px;
    text-align: center;
    float: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;input type="text" class="num" /&gt;
  &lt;input type="text" class="num2" /&gt;
  &lt;input type="submit" class="submit" value="Make Table" /&gt;
  &lt;input type="button" class="clear" value="clear" /&gt;
  &lt;div class="container"&gt;
    &lt;ul&gt;
  
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I need to look like this</p>
  
  <p><a href="https://i.stack.imgur.com/tJDxJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tJDxJ.png" alt="enter image description here"></a></p>