JSFiddle - React, Tailwind, and code Playground

by mrcl

HTML

<div class="qwrap itemswrap">
<ul class="head odd i0">
<li class="dimension odd">&nbsp;</li>
<li class="odd itemhead i1"><label class="noclick" title="Zeiteinheit">Zeiteinheit</label></li>
<li class="even itemhead i2"><label class="noclick"></label></li>
</ul>
<ul class="body odd i0 firstItem  ">
<li class="dimension odd i0"><label class="noclick" title="Konzerte in kleinerem Rahmen, zum Beispiel in Bars oder Clubs, besuchen">Konzerte in kleinerem Rahmen, zum Beispiel in Bars oder Clubs, besuchen&nbsp;</label></li>
<li class="d1 item odd i1"><label for="v_43x1" title="Konzerte in kleinerem Rahmen, zum Beispiel in Bars oder Clubs, besuchen, Zeiteinheit"><span class="category">Zeiteinheit&nbsp;</span><select name="v_43" id="v_43x1"><option class="odd i1" data-textid="1" value="1">Pro Woche&nbsp;</option><option class="even i2" data-textid="1" value="2">Pro Monat&nbsp;</option><option class="odd i3" data-textid="1" value="3">Pro Jahr&nbsp;</option><option class="even i4" data-textid="1" value="4">nie&nbsp;</option></select></label></li>
<li class="d2 item even i2"><label for="v_44x2" title="Konzerte in kleinerem Rahmen, zum Beispiel in Bars oder Clubs, besuchen"><span class="category">&nbsp;</span><input min="0" max="20" type="text" name="v_44" id="v_44x2"><!-- <select name="v_44" id="v_44x2"><option class="odd i1" data-textid="1" value="1">&nbsp;</option><option class="even i2" data-textid="1" value="2">&nbsp;</option><option class="odd i3" data-textid="1" value="3">&nbsp;</option><option class="even i4" data-textid="1" value="4">&nbsp;</option><option class="odd i5" data-textid="1" value="5">&nbsp;</option></select> --></label></li>
</ul>
<ul class="body even i1   ">
<li class="dimension odd i0"><label class="noclick" title="Tanzen oder in Discotheken, Clubs gehen">Tanzen oder in Discotheken, Clubs gehen&nbsp;</label></li>
<li class="d3 item odd i1"><label for="v_29x1" title="Tanzen oder in Discotheken, Clubs gehen, Zeiteinheit"><span...

CSS

body,li { font-family:sans-serif; font-size:10pt;}
li { display:inline;  }
ul {margin:0;padding:0;}
input { width:60px!important; }
ul.even {color:red;} ul.odd {color:blue;}
li.dimension {display:inline-block;width:400px;}

JavaScript

$("div.itemswrap").hide();

function randomize(items) {
    var output = [], i;
    for (var i=0;i<items.length;i++) {
        i=Math.floor(Math.random()*items.length);
        output.push(items.splice(i, 1)[0]);
    }
    return output;
}

var mixitems=randomize($("div.itemswrap>ul.body").toArray());


//.sort(function(x, y) {
//var r=-1+Math.random()*2;console.log(r);return r; });

for (var i=0;i<mixitems.length;i++) {
	  $("div.itemswrap").append($(mixitems[i]).removeClass("even odd"));
    if ( i%2 == 0 ) { $(mixitems[i]).addClass("even"); } else { $(mixitems[i]).addClass("odd"); }    
}

$("div.itemswrap").show();
$("select").change(function() {
  var conf={
  "nie":{min:0,max:0,disable:true,fill:0},
  "Pro Woche":{min:1,max:20,disable:false},
  "Pro Monat":{min:1,max:30,disable:false},
  "Pro Jahr":{min:1,max:90,disable:false}
  };

  var seloption=$(this).find("option:selected").text().trim();
  var inp=$(this).closest("ul.body").find("input");
  //inp.css("background-color","beige");
  inp.attr("min",conf[seloption]["min"]);
  inp.attr("max",conf[seloption]["max"]);
  if (typeof conf[seloption].fill != "undefined") {
  	inp.val(conf[seloption].fill);
  } else { inp.val(""); }
  if (conf[seloption].disable == true) {
  	inp.attr("disabled",true);
  } else { inp.attr("disabled",false); }
  
}).change();

$("input").change(function() {
  var t=$(this),val=parseInt(t.val()),min=t.attr("min"),max=t.attr("max"); 
  if (val > max) { t.val(""); return true; } 
  if (val < min) { t.val(""); return true; }
  if (isNaN(val)) { t.val(""); return true; }
  
});