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

Question

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.

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

I referred to the following link for making the ruler:

How to make a ruler scale in HTML and CSS

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.

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.

https://jsfiddle.net/yoshi2095/pvjhLggz/9/

HTML:

<div>
<a href="#" onclick="inputNumber()"><ul class="ruler" data-items="10"></ul></a>         
</div>

CSS:

 .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;
}

JS:

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 < len; i++) {
        ruler.append(item.clone().text(i + 1));
    }
  });
});

Any help would be greatly appreciated. Thanks.