JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <label for="foods">What are some of your favourite foods?</label>
    <div>
        <textarea name="foods" class="ml" cols="40" rows="10"></textarea>
    </div>
    
    <input type="submit"></submit>
</form>
<p>Result (for server-side processing):</p>
<pre id="result"></pre>

CSS

form,
p {
    padding:1em;
}
input {
    display:block;
    margin-bottom:1em;
}
pre {
    margin:1em;
    padding:1em;
    border:1px solid #000;
}

JavaScript

/*
 * jQuery Multi Line Text Input
 * Version 0.0.1
 * http://github.com/staydecent/jquery-multilinetext
 *
 * Replaces a textarea with multiple text inputs, automatically 
 * appending a new input when the last is filled with content.
 *
 * Copyright (c) 2011 Adrian Unger (http://staydecent.ca)
 * Released under the MIT license.
*/

(function($) {

    $.fn.multilineText = function(options, callback) {

        var settings = {
            // Not sure what (if any) settings will be helpful
            'error-element': '#error_message'
        };

        var create_multilines = function(element) {
            /*
            Removes a textarea element, replacing it 
            with text inputs for each line.
            */
            var $this = $(element);

            var parent = $this.parent();
            var name = $this.attr('name');
            var text = $this.val();

            // Remove double newlines and create an array
            var lines = text.replace("\n\n", "\n").split("\n");
            // remove the textarea and inputs
            $this.remove();
            $('.' + name + '-mlText').remove();

            // create a textfield for each line 
            for (var line in lines) {
                var value = $.trim(lines[line]);
                
                if (value !== "") {
                    parent.append('<input type="text" class="' + name + '-mlText" name="' + name + '" value="' + value + '">');
                }
            }

            // add blank input
            parent.append('<input type="text" class="' + name + '-mlText" name="' + name + '" value="">');

            $('.' + name + '-mlText').live('focus', function() {
                // wait for keypress and check this is the last input
                // and is empty and previous input has content
                $(this).keypress(function() {
                    if ($(this).is(':last-child') && $(this).val() === "" && $(this).prev('.mlText').val() !== "") {
          ...