JSFiddle - React, Tailwind, and code Playground

by Katarina Countiss

HTML

<body>
<div class="box-related-product-top">
    <div>  
        <div class="price">$20</div>             
        <div class="image">No Image</div>
        <div class="name">Stack overflow</div>
        <div class="cart">3</div>
    </div>  
    <div>  
        <div class="price">$30</div>              
        <div class="image">No Image</div>
        <div class="name">Stack Exchange</div>
        <div class="cart">10</div>
    </div>
</div>

<div id="output1">
</div>

<div id="output2">
</div>

<div id="output3">
</div>
<div id="output4">
</div>
</body>

CSS

.box-related-product-top > div{
    border-bottom:solid 1px black;
}

JavaScript

// this code is for a to do list that sorts tasks by type

$('body').each(function(){
    $(this).find('.image').appendTo("#output1");
    $(this).find('.name').appendTo("#output2");
    $(this).find('.price').appendTo("#output3");
    $(this).find('.cart').appendTo("#output4");
});