JSFiddle - React, Tailwind, and code Playground

by Chace

HTML

<ul id="values">
    <li class="first" value="45">fortyfive</li>
    <li class="second" value="4five5">45</li>
</ul>
<input value="45">
<div class="container"></div>

CSS

.container {
    background: beige;
}

JavaScript

var new1Txt = $(".first").text();
var new1Val = $(".first").val();
var new2Txt = $(".second").text();
var new2Val = $(".second").val();
var new2Real = x = document.getElementsByClassName("second");
var new2JQ = $(".second");

$(document).ready(function () {

    $(".container").append("<p>" + new1Txt + "</p>");
    $(".container").append("<p>" + new1Val + "</p>");
    $(".container").append("<p>" + new2Txt + "</p>");
    $(".container").append("<p>" + new2Val + "</p>");
    $(".container").append("<p>" + new2Real[0].getAttribute('value') + "</p>");
    $(".container").append("<p>" + new2JQ[0].getAttribute('value') + "</p>");

});