PHP/Regex - sequential str_replace with letters (a, b, c)

Question

Consider the following code stored in a database table:

<section id="aids" data-toggle="collapse" data-target="#aids2" class="SecCon">
  <h2><span class="label label-primary"><small><span class="only-collapsed glyphicon glyphicon-chevron-down"></span><span class="only-expanded glyphicon glyphicon-remove-sign"></span></small> Aids</span></h2>
  <div id="aids2" class="collapse in article">
    <p>Some text.</p>
  </div>
</section>

I'd like to simplify it, like this...

<section id="directions">
  <h2>Directions</h2>
  <div><p>Some text.</p></div>
</section>
<section id="ecology">
  <h2>Ecology</h2>
  <div><p>Some text.</p></div>
</section>

I then want to use PHP, jQuery, regex or whatever to fill in the missing id's, classes and glyphicons.

I have a jQuery script - see Using regex + str_replace to prep tags for jQuery - that does a very good job, but there are a few complications. I'm still working on it, but I think it might be better to either 1) do the whole thing with a regex and/or str_replace, or 2) continue using the jQuery script, but use some sort of regex and/or str_replace to create the "secondary ID."

Some details...

Before the user can toggle sections open or closed by clicking on the header, every section has to have a data-target value that matches the following div's ID, like this...

<section id="aids" data-toggle="collapse" data-target="#myvalue" class="SecCon">
<h2>Header</h2>
<div id="myvalue">

I'm running into multiple problems with headers that have more than one word. I can modify the jQuery script so that the header "The History of World War II" creates the ID the-history-of-world-war-ii and the secondary ID the-history-of-world-war-ii2, but those are a little complex. I've also discovered some additional complications. I prefer my original scheme - manually creating section ID's ("history," in this case).

So here's my question:

Do you know how to write a regular expression that can replace the jQuery script? If not, is there a way to use PHP and/or a regex to simply give every instance of data-target and div ID 1) a matching value, and 2) a sequential alphabetical value (e.g. a, b, c)?

In other words, the display would now look like this:

<section id="ecology" data-toggle="collapse" data-target="#a" class="SecCon">
  <h2>Ecology</h2>
  <div id="a">
    <p>Some text</p>
  </div>
<section>

<section id="principles" data-toggle="collapse" data-target="#b" class="SecCon">
  <h2>Principles of Ecology</h2>
  <div id="b">
    <p>Some text</p>
  </div>
<section>

I could then continue using the jQuery script and PHP/regex modifier together.

(Sorry for the convoluted question; I don't know how to explain it more briefly.)