How to split input value and insert into tspan

I want to split the text entered by user in input text box and append into tspan of svg text

Example:

<input type="text" autofocus/>

Text entered would be for example: "I have some text that wraps onto three lines in this container"

I want to get my jquery/javascript to parse those lines and turn it into this:

<text text-anchor="start" y="152">
<tspan x="212" dy="-15">I have some text that</tspan>
<tspan x="212" dy="20">wraps onto three </tspan>
<tspan x="212" dy="22">lines in this container</tspan>
</text>

Note: Text would be split based on width minus 5px of svg shape to keep text inside borders

So far I tried this:

            var output;
            window.onchange = onchange;
            function onchange(e)
            {
                output = e.target.value;
                var width = e.target.value.length;
                var element = document.getElementById("text");
                var height = element.clientHeight;
                console.log("Width of text:" + width);
                console.log("Height of text:" + height);
                console.log("Text entered: " + output);

                var words  = output.split(/[ ,]+/);
                console.log(words );
                e.target.value = '';
            }

            var el = document.getElementById("rect"); // or other selector like querySelector()
            var rect = el.getBoundingClientRect(); // get the bounding rectangle

            console.log("Width of rect: " + rect.width);
            console.log("Height of rect: " + rect.height);

            $("input[type='text']").bind('keydown', function () {
                $(this).attr("size", Math.max(5, $(this).val().length));
            });