How to get multiple values with colors on button click in UI list?

Question

I have multiple boxes with values and color circles. I want to add all/multiple data in below UL list after click on save button.

What I tried:

$('.save').click(function() {
  var text = $('.content-box .text').text();
  var color = $('.content-box .color-circle').css('background');
  $('.data-list').append('<li>' + text + '</li>').css('background', color);
});

.content-box {
  border: 1px solid #ccc;
  border-bottom: 5px;
  overflow: hidden;
  padding: 10px;
}

.color-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  float: right;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="col-md-12 d-custom-none">
  <div class="content-box">
    <span class="text">Success</span>
    <span class="color-circle bg-success"></span>
  </div>
  <div class="content-box">
    <span class="text">Danger</span>
    <span class="color-circle bg-danger"></span>
  </div>
  <div class="content-box">
    <span class="text">Warning</span>
    <span class="color-circle bg-warning"></span>
  </div>
  <button class="save btn btn-primary" type="button">Save Data in below list</button>

  <br><br>
  <h5>Below is the list where data will display after click on above save button</h5>
  <ul class="data-list">
  </ul>

</div>

I want to added per data in each LI instead of all data coming in single LI.

Answer 1

You have to loop through your context-box class div element.

Try below working code-

$('.save').click(function() {
  $('.data-list').html('');
  var liElem = '';
  $('.content-box').each(function(index, val){
    var txt = $(val).find('.text').text();
    var bgColor = $(val).find('.color-circle').css('background-color');
    liElem += '<li style="background-color: '+bgColor+'">' + txt + '</li>';
  });
  $('.data-list').append(liElem);
});

.content-box {
  border: 1px solid #ccc;
  border-bottom: 5px;
  overflow: hidden;
  padding: 10px;
}

.color-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  float: right;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="col-md-12 d-custom-none">
  <div class="content-box">
    <span class="text">Success</span>
    <span class="color-circle bg-success"></span>
  </div>
  <div class="content-box">
    <span class="text">Danger</span>
    <span class="color-circle bg-danger"></span>
  </div>
  <div class="content-box">
    <span class="text">Warning</span>
    <span class="color-circle bg-warning"></span>
  </div>
  <button class="save btn btn-primary" type="button">Save Data in below list</button>

  <br><br>
  <h5>Below is the list where data will display after click on above save button</h5>
  <ul class="data-list">
  </ul>

</div>