I think your mistake is putting all the information you want to pull out into the 'content' field of the Resource. You shouldn't need a Template Variable or any JS.
You can put the service headings in the 'pagetitle' or 'longtitle' fields of the resource, and the description in the 'description' field.
That way you can display them anywhere and pull them in anywhere with getResources or pdoResources. This would be in your Template:
<div class="item">
<h1>[[*pagetitle]]</h1>
<p>[[*description</p>
</div>
BTW, I think the NewsPublisher extra would be perfect for letting the users create the resources.
[[!NewsPublisher? &show=`pagetitle,description` &require=`pagetitle,description` &parentid=`12`]]
Change the &parentid value to the ID of the container that holds the service pages.
BTW, if the service pages will contain more information, in addition to the title and description, you'll want to add a tag for the 'content' field to the template and add that field to the properties in the NewsPublisher tag.