JSFiddle - React, Tailwind, and code Playground

by jjay225

HTML

<div id="bill-list">

                    <div id="bill-panel">
                    <!-- Bill -->
                    <div class="bill">

                        <!-- Bill description - Holds Bill details -->
                        <div class="bill-description">
                            <div class="bill-info bill-number"><span>000A</span></div>
                            <div class="bill-info table-name"><span>TABLE 78</span></div>
                            <div class="bill-info room-number"><span>A678</span></div>
                            <div class="bill-info amount"><span>76.00</span></div>
                            <div class="bill-remove-icon"></div>
                        </div>

                        <!-- Bill Item list -->
                        <div class="bill-item-list">

                            <!-- Item : This is a sample element & will be cleared when system loads -->
                            <div class="bill-item">

                                <!-- Item image -->
                                <div class="bill-item-img"></div>

                                <!-- Item description -->
                                <div class="bill-item-description">
                                    <div class="bill-item-name">

                                        <!-- Item Name -->
                                        <p class="bill-item-name-left">Normal Cofee</p>

                                        <!-- Item Price -->
                                        <p class="bill-item-name-right">170.00</p>

                                        <div class="clear"></div>
                                    </div>

                                    <!-- Total item price -->
                                    <div class="bill-item-price">
                                        <span>170.00</span>
                                    </div>

                                    <!-- Item Quantity -->
                         ...

JavaScript

var parentTopCoordinate = $('#bill-list').offset().top;
    var elementCoordinate = $(elem).parent().position().top;

$('#bill-list').find(".bill-item-list").each(function (){
    alert('dfsdf');   
    if($(this).css("display") == "block" && $(this).find(".bill-item").length > 0){
            elementCoordinate = elementCoordinate - 320;
        }
    console.log(('len' +$(this).find(".bill-item").length));
        if(($(this).find(".bill-item").length) == 0){
            elementCoordinate = elementCoordinate - 100;
        }
    });