Отобразить стоимость в теге span

[mirstiker]

Всем привет! сейчас на сайте сумма отображается в теге input , а хочется переоборудовать в span и задать собственные стили, что нужно поменять в коде js , чтобы выводилась сумма в теге span?

<div class="form-group">
                    <small class="form-text text-muted"> Стоимость трафарета:</small>
                   <!-- <input  name="price" id="sum" type="text" readonly> -->
                    <span name="price" id="sum"> </span>
                        <small class="form-text text-muted"> * Цена отображается при условии готового макета для производства</small>
                </div>

jQuery(document).ready(function($) {
 
        var ims = <?php echo json_encode($images); ?>, slider;
 
        function slide(i) {
            var f = [];
 
            ims[i].forEach(function(e) {
                f.push({img: e, thumb: e});
            });
 
            if(slider) slider.load(f).show(0);
 
            else slider = $('.fotorama').fotorama({
                data: f,
                margin: 0,
                nav: 'thumbs',
                thumbwidth: 80,
                thumbheight: 50,
                autoplay: 2000,
                loop: true,
                stopautoplayontouch: false
            }).data('fotorama');
        }
 
        var $calc = $('#calc');
 
        $('[name=trafaret_1]', $calc).on('change', function() {
            slide(this.selectedIndex + 1);
        }).trigger('change');
 
        $('[name=trafaret]', $calc).on('change', function () {
            if (this.value == 1) {
                $('[name=trafaret_1]').show(400);
                slide(1);
            } else {
                $('[name=trafaret_1]').hide(400);
                slide(0);
            }
        }).filter(':checked').trigger('change');
 
      
        $calc.on('change input', 'select,input', function (e) {
 
            var calc = e.delegateTarget;
 
            if (this.type == 'text') {
                this.value = this.value.replace(/^0|\D/, '');
                var val = parseInt(this.value),
                    max = parseInt(this.max || this.dataset.max);
                if (val > max) this.value = max;
            }
 
            var p = +calc.trafaret.value,
                t = p;
            if (t == 1) p = +calc.trafaret_1.value;
 
            var w = +calc.x.value / 100,
                h = +calc.y.value / 100,
                s = w * h; // м²
 
            if (t == 1) {
                //Наценка 50% за площадь меньше 0,1 м²
                if (s < 0.1) p *= 3.50;
            } else {
                //Скидка 20% за площадь больше 50 м²
                if (s > 50) p *= 0.80;
                //Скидка 15% за площадь больше 20 м²
                else if (s > 20) p *= 0.85;
                //Скидка 10% за площадь больше 10 м²
                else if (s > 10) p *= 0.90;
                //Наценка 50% за площадь меньше 0,1 м²
                else if (s < 0.1) p *= 2.50;
            }
 
            calc.price.value = (s * p).toFixed(2).replace('.', ',') + ' ₽';
 
        });
 
        $('[type=text]', $calc).on('blur', function() {
            var val = parseInt(this.value),
                min = parseInt(this.min || this.dataset.min);
            if (val < min || isNaN(val)) this.value = min;
            $(this).trigger('change');
        });
    });
</script>