Append elements on value

Question

I'm using roundSlider for radial slider. Which gives me value on slide. on slide I'm appeding span elements.

So what I want exactly is span should as per plates number. If there are 22 plates so span should be only 22 and if plates are 10 then span should also be 10 or vice-versa.

Find Fiddle Demo

Currently, It's just appending in 1 length. I want it to append (add and remove) as per var tp value.

var tp = $('.rs-tooltip').text() / 1000;
$('#plates span').text(tp);
$('.mbox').append('<span></span>')

Answer 1

Demo Fiddle Here

add with for loop event .The for loop will append the span depend on span value. Initially remove inner content of .mbox .Then its will re added with a help of for loop

function traceEvent(e) {
        var tp = $('.rs-tooltip').text() / 1000;
        console.log(tp);
      $('#plates span').text(tp);
      $('.mbox').html("");//empty
    for(var i=0; i<tp; i++){
        $('.mbox').append('<span id="'+[i]+'"></span>')//add
        }

Answer 2

See updated here: https://jsfiddle.net/ddan/a6devr3b/3/

I did a small change on your traceEvent method to empty the plates first.

function traceEvent(e) {
    var tp = $('.rs-tooltip').text() / 1000;
    console.log(tp);
    $('#plates span').text(tp);
    $('.mbox').html('');
    for (i = 0; i < tp; i++ )
    $('.mbox').append('<span/>');
}

Answer 3

you can check below code 1. remove all span 2. add span base on tp value

 function traceEvent(e) {
  var tp = $('.rs-tooltip').text() / 1000;
  $('#plates span').text(tp);
  $('.mbox').html("");
  for(var i=0; i<tp; i++){
     $('.mbox').append('<span></span>');
  }
 }