Appending separate divs from selected items

50
April 16, 2018, at 07:27 AM

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");
  } 
})
Answer 1

try :

$('.select-group').on('click', '.btn', function() { 
  var btn = $(this); 
  if (btn.hasClass('active')) { 
    btn.removeClass('active'); 
  } else { 
    btn.addClass('active'); 
  } 
}); 
 
$('.submit-ct').on('click', function(){ 
  var itemSelected = $( '.btn.active' ).prev().text(); 
  if (!itemSelected) return; 
  $("<div>"+itemSelected+"</div>").attr('class', 'item-list-select').appendTo(".item-list"); 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<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> 
 
<h3>selected:</h3> 
<div class="item-list"></div> 
 
<a class="submit-ct" href="#"> 
  Submit Order 
</a>

Answer 2

Found the solution by using each()

$('.submit-ct').on('click', function(){
    $( '.btn.active' ).each(function() {
      var itemSelected = $( this ).prev().text();
      $("<div>"+itemSelected+"</div>").attr('class', 'item-list-select').appendTo(".item-list");
    });
})
READ ALSO
Error parsing the date/time string: Wrong time format jquery timepicker

Error parsing the date/time string: Wrong time format jquery timepicker

I'm working with the datetimeRange from jquery timepicker but it keeps indicating that I have the wrong time format, even though it looks like everything is exactly the sameDoes anyone see where the problem is? I'm not sure if it's because of the UTC at the end

24
Boolean comparison == and === [on hold]

Boolean comparison == and === [on hold]

I'm trying to understand,

46
Extract external domain xml data with jquery

Extract external domain xml data with jquery

I have an error in the browser when extracting the xml data from an external domain through jquery ajax

48
How to select a specific start for an increment and reset it

How to select a specific start for an increment and reset it

Ive been spending countless hours trying to figure it outWhat I am trying to make is an animating slide show

43