JSFiddle - React, Tailwind, and code Playground

by fallenreaper

HTML

<div id="dataout"></div>
<br />
<div id="altdata"></div>
<br />
<div id="dtr">
    <div id="dtr_select_div">Number of Repeater Items to Show: <select id="dll"></select></div>
    <br />
    <div id="dtr_list"></div>
</div>

CSS

div#dtr {
    /*
    background-color: teal;
    */
    border-radius: 4px;
    width:100%;
    overflow:auto;
}
div#dtr div#dtr_list > div {
    /*
    background-color: orange;
    */
    margin: 5px;
    padding:2px;
    border-radius: 4px;
    width:100%;
    border: solid grey 1px;
}
div#dtr_select_div{
    float: right;
}
/*
span#dtr_title{
    font-size: 20pt;
    font-family: "Lucidia Console", Courier, monospace;
    font-style: italic;
    font-weight: bold;
}
*/

JavaScript

var _DTRSIZE_   = 30;
var _DTRSTART_  = 6;
var _DTRWIDTH_  = 800;
var _DTRHEIGHT_ = 600;
$(function(){
    $("#dataout, #altdata").hide();
    $("#dataout, #altdata").next().hide();
    var $dtr_item = $("<div />").append("<span>Something said here.</span>").append("<input />").append("<input />").append("<input />");
    var $alt_item = $("<div style='display: inline-block;' />").append("<span style=''>Some content:</span>").append("<span style='float:right;display:inline-block;'>Additional Content</span>").append("<input style='position: relative; top:37px; left:20px;' />").append("<input style='position:relative; top:100px; left: 250px;' />").append("<input />").append("<a href='www.google.com'>Google</a>");
    var maxH = 0;
    var maxW = 0;
    $dtr_item = $alt_item;
    for(var i = 0; i < _DTRSIZE_; i++){ 
        var $option = $("<option />").attr({id:"option_"+(i+1), value:""+(i+1)}).text(""+(i+1));
        if($option.val() == _DTRSTART_)
        {
            $option.attr("selected","selected");
        }
        $("#dll").append($option);
    }
    $("#dll").on("change", function(){
        $("#dataout").text( $(this).val() );
        //$("#dtr_list").empty
        var dtrSize = $("#dtr_list > div").length;
        //alert("dtrSize: "+dtrSize+"\nLength: "+$(this).val());
        if(dtrSize > $(this).val()){
            for(var i = dtrSize; i > $(this).val(); i--)
            {
                $("#dataout").append("hiding...");
                $($("#dtr_list > div")[i-1]).hide();   
            }
        }else{
            for(var i = 0; i < dtrSize; i++)
            {
                if(!$($("#dtr_list > div")[i]).is(":visible"))
                {
                     $("#dataout").append("showing..");
                     $($("#dtr_list > div")[i]).show();  
                }
            }
            
            for(var i = dtrSize; i < $(this).val(); i++){
                    $("#dataout").append("appending..");
                    var...