带可编辑数字行的Javascript多定时器

我已经用jquery/javascript编写了一个快速计时器脚本，允许我的朋友根据标记对多个事件进行计时，以便进行动物行为研究；i、 鼠标当前正在吃东西，鼠标当前正在挖掘等等，只需按任意键，它将跟踪按键之间的时间并创建日志

在这里的行动：只需点击a..z键启动计时器

我的问题是：她想要一个更直观的、可编辑的时间轴，在这里，它以某种方式将可编辑框放在一条数字线上，代表整个1800秒的视频，如soundcloud评论，我想。我打算让每个键更改打印一个新的表单输入元素，CSS将其放置在页面左侧的秒/1800*宽像素处，但如果更改了，则很难保持总数的准确性。你们有没有人知道如何制作一个可编辑的时间线，并且可以很容易地检索到值

谢谢