Javascript to cut <u> to <u> and add it to new DIV

Question

I am currently working with a Website Design kit to create Job Descriptions (SAP SuccessFactors Career Site Builder) so my options of reqriting everything are basically nonexistent. I need to force everything with CSS and JavaScript. Yay. The Kit is very basic and does not allow to add columns in between.

The goal is to have the layout like this:

---------- General stuff ------------

-- Tasks ------------- Requirements -

--------- More General Stuff --------

The second "More General Stuff" can be ignored as it's in a new element.

The Code for the Element containing General Stuff, Tasks and Requirement looks as follows:

<span class="jobdescription">
     <div id="general Stuff">....</div>
     <p><u>TASKS</u></p>
     <ul>
         <li>Lorem Ipsum 1</li>
         <li>Lorem Ipsum 2</li>
     </ul>
     <p> </p>
     <p><u>REQUIREMENTS</u></p>
     <ul>
         <li>Lorem Ipsum 1</li>
         <li>Lorem Ipsum 2</li>
     </ul>
</span>

My first idea was to add a new DIV, aplice all and write them into the new DIV:

<div id="custJobPosting" style="display:none;">
  <div class="job-details-container"></div>
</div>

<script type="text/javascript">
  $(".jobdescription u").slice(0, 3).each(function (i) {
    $(".job-details-container").append($("<div class='job-details-section'></div>").append($(this)).append($(".jobdescription ul").first()));
  });

  $(".job-details-container").append($(".jobdescription p").first());
  var jobDetailsSectionTemplate = $("<div class='job-details-section'></div>");
  $(".jobdescription u").slice(-4).each(function (i) {
    if (i === 3) return;
    var headerText = $(this).text();
    var paragraph = $(this).closest("p").clone();
    var closestEl = paragraph.text(paragraph.text().trim().replace(headerText, '')).append($(".jobdescription ul").first());
    $(".job-details-container").append(jobDetailsSectionTemplate.clone().append($(this)).append(closestEl));
  });

  $(".job-details-container").append($(".jobdescription u:last-of-type").css("width", "100%"));

  $(".jobdescription").html($("#custJobPosting"));

  $("#custJobPosting").show();
</script>

I then just style the custJobPosting and job-details-container to get the 2 Column look. While this works like a charm, it cuts the <div id="general Stuff>.... and does not display it anymore.

Any ideas wher eI went wrong or any ideas to do it easier?

Thanks for your ideas!