Jquery追加故障

我有一个问题，我有一段js代码，它附加了一个span元素。我的问题是它一直在消失，它不是一个bug什么的。

附言：我正在使用jquery ui滑块。我正在做的是使用附加的元素（span）显示滑块的当前值。唯一的问题是，当我点击另一个滑块时，它一直在消失。

以下是我的所有代码：HTML

<div id = "opacity" class="slider-range"></div><br>
<div id = "volume" class="slider-range"></div><br>

Javascript

var append_element = $('<span></span>');
        $('.slider-range').slider( {
            animate : true,
        });
        $("#opacity").slider({
            min     : 0,
            max     : 100,
            value   : 60,
            step    : 10,
            change  : function(event, ui) {
                slider_value('#opacity', ui.value);
            }
        });
        $("#volume").slider({
            min     : 0,
            max     : 100,
            value   : 20,
            step    : 10,
            change  : function(event, ui) {
                slider_value('#volume', ui.value);
            }
        });
        function slider_value(id, response) {
            append_element.removeClass().appendTo(id);
            //remove '#' / get id
            id = $(id).attr('id');
            var new_span = $('span').addClass('slider-value-'+id);
            $(new_span).html(response);
            console.log(new_span);
        }

任何人。把我的头发扯到这里T_T。

谢谢。