How can I get span to sit inside an <a> tag within a list item?

I'm trying to get the hyperlinks in my mobile menu to reach the whole width of the container, whilst allowing the submenu buttons to sit beside the parent list items on the right hand side. At the moment I am able to set the padding on the parent links so that they reach the edge of the submenu button, however the links without submenu buttons have a gap on the right hand side that isn't clickable, whereas I want it to be the full width of the container.

I've tried to change the javascript from .insertBefore to .append to try and insert the buttons into the li a, thinking that this would allow me to set the padding to full width, but this hasn't worked.

This is largely a cosmetic issue, because the links have a grey overlay when pressed on an apple touch screen device, and it looks strange when there's a gap at the end.

I've made a fiddle – https://jsfiddle.net/8nj5y4t1/39/

To simplify my explanation, what I'm trying to achieve is to get the pink hyperlinks to cover the full extent of the orange ul menu.