Appending separate divs from selected items

I'm trying to display the text of only the selected items when the submit button is clicked. The issue I'm getting is all selected items get put into a single <div> element. Is there a way to make each selected item go into their own <div> element?

Here is the html for the button items that can be selected:

<div class="select-group">
    <p class="item-selection">item 1</p><button type="button" class="btn btn-default check">Add Item</button>
    <p class="item-selection">item 2</p><button type="button" class="btn btn-default check">Add Item</button>
    <p class="item-selection">item 3</p><button type="button" class="btn btn-default check">Add Item</button>
</div>
<a class="submit-ct" href="#">
  Submit Order
</a>

Here is the jquery:

$('.submit-ct').on('click', function(){
  if ( $( '.btn' ).hasClass( 'active' ) ) {
    var itemSelected = $( '.btn.active' ).prev().text();
    $("<div>"+itemSelected+"</div>").attr('class', 'item-list-select').appendTo(".item-list");
  } 
})