JSFiddle - React, Tailwind, and code Playground

by mori57

HTML

<div id='main'>
        <div id="a21315" class="content gradient">
            <div class='header gradient'>
                <div class='headimg'></div>
                <h1>Input Shaft Size</h1>
                <div class="minus_sprite "></div>
                <ul class="de-radio ">
                    <li id="a22134340"><span class='checked'>0.4375" X 0.88"</span></li>
                    <li id="a22151870"><span class=''>0.500" X 1.13"</span></li>
                    <li id="a22168545"><span class=''>0.625" X 1.50"</span></li>
                    <li id="a22172070"><span class=''>0.625" X 1.57"</span></li>
                    <li id="a22184915"><span class=''>0.750" X 1.57"</span></li>
                    <li id="a22946970"><span class=''>0.875" X 1.97"</span></li>
                </ul>
            </div>
        </div> <!-- missing a closing div -->
        <div id="a21315" class="content gradient">
            <div class='header gradient'>
                <div class='headimg'></div>
                <h1>another Headline</h1>
                <div class="minus_sprite "></div>
                <ul class="de-radio ">
                    <li id="a22134341"><span class='checked'>another checked item"</span></li>
                    <li id="a22151871"><span class=''>0.500" X 1.13"</span></li>
                    <li id="a22168541"><span class=''>0.625" X 1.50"</span></li>
                    <li id="a22172071"><span class=''>0.625" X 1.57"</span></li>
                    <li id="a22184911"><span class=''>0.750" X 1.57"</span></li>
                    <li id="a22946971"><span class=''>0.875" X 1.97"</span></li>
                </ul>
            </div>
        </div> <!-- you're missing a closing div tag -->
    </div>
    <div id="output">
        
    </div>

CSS

#output {
 float:right;
width:200px;
 border:1px solid blue;
 border-radius: 5px 0 0 5px;    
}

JavaScript

// First, get a collection of your content blocks
    var $blocks = $(".content.gradient:not(.hidden)");
    // get a reference to the div you want to spit all this out into
    var $out = $("#output");
    
    // iterate through each of the non-hidden blocks
    $blocks.each(function(){
        // it occurs to me that we should cache $(this) since
        // we're accessing it multiple times
        var $this = $(this);
        // get a ref to the h1 from this block's h1
        var this_h1 = $this.find(".header:not(.hidden) h1");
        // get a ref to the .checked li from this block
        var this_checked = $this.find(".header:not(.hidden) .checked");
        // if this_h1 contains a result, append it to the output div
        if(this_h1) {
            $out.append(this_h1.clone());            
        }
        // if this_checked contains a result, 
        //append that out in the output div, too        
        if(this_checked){
            $out.append(this_checked.clone());            
        }
    });