Wrap each elements with class into div and wrap sub elements

Question

I've been looking for hours for this one and i'm really close.

This is a dummy version, because my code is very long. There's no pattern in the li tags. What i want is to wrap up all the li tags with class "left", except last child. Last child i want to have class "right".

I use gravity form in wordpress and all inputs is wrapped up in one ul. Lets says i'm adding 10 different categories to the input fields. Normally use each function to wrap up li tag in a blog layout but here i have to add divs into the wrapped li tag.

:)

// jQuery
(function($) {
  // Wrap private
  $('ul.now .private').wrapAll('<div class="service" />');  
  // Wrap business
  $('ul.now .business').wrapAll('<div class="service" />');
  // Wrap other
  $('ul.now .other').wrapAll('<div class="service" />');


  // Wrap each options
   $('ul.now .service li:not(:last-child)').each(function() {
     $(this).wrapAll('<div class="left" />')
   });
   // Wrap each total price
   $('ul.now .service li:last-child').each(function() {
     $(this).wrapAll('<div class="right" />')
   });
 
})(jQuery);

.wrapper {
  background: lightblue;
  padding: 20px;
}
.left {
  background: pink;
  padding: 0px;
}
.right {
  background: orange;
  padding: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<! -- what i have -->
<h3>What i have</h3>
<ul class="now">
  <li class="private">name</li>
  <li class="private">number</li>
  <li class="private">phone</li>
  <li class="business">name</li>
  <li class="business">number</li>
  <li class="business">phone</li>
  <li class="other">name</li>
  <li class="other">number</li>
  <li class="other">phone</li>
</ul>

<!-- what i want -->
<h3>What i want</h3>
<ul class="want">
  <div class="wrapper">
    <div class="left">
      <li class="private">name</li>
      <li class="private">number</li>
    </div>
    <div class="right">
      <li class="private">phone</li>
    </div>
  </div>
  <div class="wrapper">
    <div class="left">
      <li class="business">name</li>
      <li class="business">number</li>
    </div>
    <div class="right">
      <li class="business">phone</li>
    </div>
  </div>      
  <div class="wrapper">
    <div class="left">
      <li class="other">name</li>
      <li class="other">number</li>
    </div>
    <div class="right">
      <li class="other">phone</li>
    </div>
  </div>
</ul>

Answer 1

This will loop through the list items and get their class names and then do a loop on each unique class name. This is more dynamic. Does that work for you? If you have more than one class for each li it might be worth adding data attributes.. let me know

var classes = [];

var list = $('ul.now li');

$.each(list, function(index, value) {
  var className = $(value).attr('class');
  classes.push(className);
});
var listArray = $.unique(classes);

$.each(listArray, function(index, value) {
  $('ul .' + value).wrapAll("<div class='wrapper' />");
  $('ul .' + value + ':last-child').wrapAll("<div class='right' />");
  $('ul .' + value + ':not(:last-child').wrapAll("<div class='left' />");
});

.wrapper {
  background: lightblue;
  padding: 20px;
}

.left {
  background: pink;
  padding: 0px;
}

.right {
  background: orange;
  padding: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<ul class="now">
  <li class="private">name</li>
  <li class="private">number</li>
  <li class="private">phone</li>
  <li class="business">name</li>
  <li class="business">number</li>
  <li class="business">phone</li>
  <li class="other">name</li>
  <li class="other">number</li>
  <li class="other">phone</li>
</ul>

Answer 2

I found an answer and now it's only wrapping the elements inside service.

But for some reason it does not work above jQuery v.2.2.4 The have to be a better way, but it works for me word wordpress

(function($) {
// Wrap private
  $('ul.now .private').wrapAll('<div class="service" />');  
  // Wrap business
  $('ul.now .business').wrapAll('<div class="service" />');
  // Wrap other
  $('ul.now .other').wrapAll('<div class="service" />');

$('.now li.gfield').each(function() {
    if ($(this.parentNode).hasClass('wrapped')) return;
        $(this).nextUntil(':last-child').andSelf().wrapAll('<div class="wrapped">');
});
})(jQuery);

.service {
  background: pink;
  padding: 10px;
}
.wrapped {
  background: lightblue;
}
/* left */
.service .wrapped:first-child {
  background: lightblue;
}
/* right */
.service .wrapped:last-child {
  background: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="now">
  <li class="gfield private">name</li>
  <li class="gfield private">number</li>
  <li class="gfield private">phone</li>
  <li class="gfield business">name</li>
  <li class="gfield business">number</li>
  <li class="gfield business">phone</li>
  <li class="gfield other">name</li>
  <li class="gfield other">number</li>
  <li class="gfield other">phone</li>
  <li>Date pick here</li>
  <li>terms here</li>
  <li>submit here</li>
</ul>