JSFiddle - React, Tailwind, and code Playground

by Praveen Kumar Purushothaman

HTML

<table><tr>
<td class="left attr_pipe_par">                  <textarea class="attr_pipe_sep" name="product_attribute[0][product_attribute_description][1][text]" cols="40" rows="5">Yellow|Red|Blue</textarea>
                  <br>
    </td></tr><tr><td class="left attr_pipe_par">                  <textarea class="attr_pipe_sep" name="product_attribute[0][product_attribute_description][1][text]" cols="40" rows="5">Hello|World</textarea>
                  <br>
                  </td></tr><tr><td class="left attr_pipe_par">                  <textarea class="attr_pipe_sep" name="product_attribute[0][product_attribute_description][1][text]" cols="40" rows="5">What|Where|When</textarea>
                  <br>
    </td></tr></table>

CSS

textarea {height: 2em;}

JavaScript

$(document).ready(function(){
    $(".attr_pipe_sep").each(function(){
        $parent = $(this).closest(".attr_pipe_par");
        values = $(this).val();
        values = values.split("|");
        $parent.append('<ul></ul>');
        for (i = 0; i < values.length; i++)
            $parent.children("ul").append('<li><label><input type="checkbox" value="' + values[i] + '" checked="checked" class="check" /> ' + values[i] + '</label></li>');
    });
    $(".attr_pipe_par").on("click", ".check", function(){
        $textarea = $(this).closest(".attr_pipe_par").children(".attr_pipe_sep");
        updated = [];
        $(this).closest(".attr_pipe_par").find(".check").each(function(){
            if ($(this).prop("checked"))
                updated.push($(this).val());
        });
        $textarea.val(updated.join('|'));
        updated = [];
    });
});