The Traveling Toothbrush

JavaScript (ES6), 65 bytes

f=([s,t],[u,v])=>s<3^u<3?f(s+t,5-u+v)+2:s-u?t-+-v:t<v?++v-t:++t-v

for(i=1;i<5;i++)for(j=1;j<9;j++){let o=document.createElement("option");o.text=""+i+j;s.add(o);t.add(o.cloneNode(true));}

<div onchange=o.textContent=f(s.value,t.value)><select id=s></select><select id=t></select><pre id=o>1

Takes input as strings.

Jelly,  24  20 bytes

d30%20ị2¦⁵R;C$¤)ạ/Ḅ‘

A monadic link accepting a list of two integers (e.g. [14,31] for the from 14 to 31 example) which yields the brushing-time.

Try it online!

Previous 24 byter built the mouth and used base 8, input was a list of lists of digits:

8R;C$C+⁴U,+ɗ⁴
ḅ8¢œiⱮạ/Ḅ‘