How to make a Ruler scale in HTML of an overall fixed size but which can be divided into required no. of sections by taking user input
<p>I am making a Ruler scale using html, css, js, whose length is supposed to be fixed always. On clicking the scale, between any two bars, a prompt will be generated and the user will then input a number which signifies the no. of sections by which the scale length (between any two bars) will be divided in equal parts and get displayed on it. </p>

<p>e.g. if initially the scale is <code>|_____|_____|_____|</code> , then on clicking 2nd bar and entering divide by 2, the scale should look like<code>|_____|__|__|_____|</code></p>

<p>I referred to the following link for making the ruler: </p>

<p><a href="https://stackoverflow.com/questions/12117974/how-to-make-a-ruler-scale-in-html-and-css">How to make a ruler scale in HTML and CSS</a></p>

<p>But in the answer given in the above link, the user has to manually change the value of the "data-items" attribute, to make different no. of sections every different time, and also, on changing its value, the overall size of the scale also increases, which contradicts my case.</p>

<p>This is what I have coded so far and I really don't know how to split any bar on user input without changing the overall length.</p>

<p><a href="https://jsfiddle.net/yoshi2095/pvjhLggz/9/" rel="nofollow noreferrer">https://jsfiddle.net/yoshi2095/pvjhLggz/9/</a></p>

<p>HTML:</p>

<pre><code>&lt;div&gt;
&lt;a href="#" onclick="inputNumber()"&gt;&lt;ul class="ruler" data-items="10"&gt;&lt;/ul&gt;&lt;/a&gt;         
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code> .ruler, .ruler li {
margin: 0;
padding: 0;
list-style: none;
display: inline-block;
}
/* IE6-7 Fix */
.ruler, .ruler li {
*display: inline;
}
.ruler {
background: lightYellow;
box-shadow: 0 -1px 1em hsl(60, 60%, 84%) inset;
border-radius: 2px;
border: 1px solid #ccc;
color: #ccc;
margin: 0;
height: 3em;
padding-right: 1cm;
white-space: nowrap;
}
.ruler li {
padding-left: 1cm;
width: 2em;
margin: .64em -1em -.64em;
text-align: center;
position: relative;
text-shadow: 1px 1px hsl(60, 60%, 84%);
}
.ruler li:before {
content: '';
position: absolute;
border-left: 1px solid #ccc;
height: .64em;
top: -.64em;
right: 1em;
}

/* Make me pretty! */
body {
font: 12px Ubuntu, Arial, sans-serif;
margin: 20px;
}

div {
margin-top: 2em;
}
</code></pre>

<p>JS:</p>

<pre><code>function inputNumber() {

            var inputNum = prompt("Divide by");
            $("a").attr("data-items",inputNum);
        }


$(function() {
// Build "dynamic" rulers by adding items
$(".ruler[data-items]").each(function() {
    var ruler = $(this).empty(),
        len = Number(ruler.attr("data-items")) || 0,
        item = $(document.createElement("li")),
        i;
    for (i = 0; i &lt; len; i++) {
        ruler.append(item.clone().text(i + 1));
    }
  });
});
</code></pre>

<p>Any help would be greatly appreciated. Thanks.        </p>