JSFiddle - React, Tailwind, and code Playground

by veloper

HTML

<textarea style="width:500px;height:150px"></textarea>

<ul id="items">
</ul>

JavaScript

function textareaToRecords() {
    pasted  = $('textarea').val();
    rows    = pasted.split("\n").map(function(x){ return $.trim(x); }).filter(function(x){ return x.length });
    records = rows.map(function(x){
        record = {};
        record["score"] = (match = x.match(/.([0-9\.\,]+)$/)) ? match[1] : "";
        record["answer"] = $.trim(x.substr(0, x.length - record["score"].length));
        return record;
    });
    return records;
}

function createListElement(record) {
    li = $('<li>');
    $('<input type="text" style="margin-right:5px;" />').width("400").val(record["answer"]).appendTo(li);
    $('<input type="text" />').width("50").val(record["score"]).appendTo(li);
    return li;
}

function updateList() {
    ul = $('ul').html('');
    records = textareaToRecords();
    $(records).each(function(i, record) {
        createListElement(record).appendTo(ul);
    });
}

$('body').on('keyup', 'textarea', function(){ updateList(); });