JSFiddle - React, Tailwind, and code Playground

by aaronbarker

HTML

<select multiple="multiple" size="5" id="orig">
    <option>Value 1</option>
    <option selected>Value 2</option>
    <option>Value 3</option>
    <option selected>Value 4</option>
    <option>Value 5</option>
    <option selected>Value 6</option>
    <option>Value 7</option>
</select>

<p>Original Selected: <span id="origCount"></span></p>
<p>Clone Selected: <span id="cloneCount"></span></p>

<p>Original HTML:<textarea id="origHTML"></textarea></p>
<p>Clone HTML:<textarea id="cloneHTML"></textarea></p>

CSS

textarea { height:200px; width:300px; }

JavaScript

$(function(){
        var orig = $("#orig");
        var copy = orig.clone();
        
        orig.after(copy);
        
        $("#origCount").text(orig.find(":selected").length);
        $("#cloneCount").text(copy.find(":selected").length);
        $("#origHTML").val(orig.html());
        $("#cloneHTML").val(copy.html());
    });