How to open div before the class close the div after another class

Question

I want to append div with class before the .left . Its must be close after the .right . I have tried like below but its automatically close in same line.

I also tried wrap() but no luck.

HTML

<!-- <div class="group"> -->
<div class="tp left arrow">Left</div>
<div class="tp bullets">
    <div class="round">1</div>
    <div class="round">2</div>
    <div class="round">3</div>
    <div class="round">4</div>
    <div class="round">5</div>
</div>
<div class="tp right arrow">right</div>
<!-- </div> -->

JS

$( ".left" ).before( "<div class='group'>" );
$( ".right" ).after( "</div'>" );

Answer 1

You can use wrapAll() method for that

$(".left,.bullets,.right").wrapAll("<div class='group'></div>")

Fiddle

Answer 2

 $('.tp').wrapAll('<div class="group" />') 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="tp left arrow">Left</div> <div class="tp bullets"><div class="round">1</div><div class="round">2</div><div class="round">3</div><div class="round">4</div><div class="round">5</div></div> <div class="tp right arrow">right</div>