JSFiddle - React, Tailwind, and code Playground

by Jay Blanchard

HTML

<div id="all">
    <div id="box"> 
        <span class="line">FONT SIZE LINE1 -</span>
        <input type="text" class="stencil-text-size" name="stencil-text-size" style="margin-left: 15px;" value="30" /><br />
        <span class="line">LINE 1-</span>
        <input type="text" class="stencil-text" name="stencil-text" style="margin-left: 15px;" value="line 1 text here"/><br />
        <span class="line">FONT SIZE LINE 2 -</span>
        <input type="text" class="stencil-text-size" name="stencil-text-size2" style="margin-left: 15px;" value="20" /><br />
        <span class="line">LINE 2-</span>
        <input type="text" class="stencil-text" name="stencil-text" style="margin-left: 15px;" value="line 2 text here" /><br />
        <span class="line">FONT SIZE LINE 3 -</span>
        <input type="text" class="stencil-text-size "name="stencil-text-size3" style="margin-left: 15px;" value="10" /><br />
        <span class="line">LINE 3-</span>
        <input type="text" class="stencil-text" name="stencil-text" style="margin-left: 15px;" value="line 3 text here" />
    </div>
    <input type="button" id="set" value="Show Fonts" />
    <div id="stencil-main"></div>
</div>

JavaScript

$('#set').click(function(e) {
    e.preventDefault();
    $('.stencil-text').each(function(index) {
        var fontSize = $(this).prevAll('.stencil-text-size').val();
        var fontText = $(this).val();
        console.log(fontSize +' '+ fontText);
        var newSpan = '<span>' + fontText + '</span><br />';
        $('#stencil-main').append(newSpan);
        $('#stencil-main span:last').css({
            "font-size": fontSize + 'px',
            "color": "red"
        });
    });
});