JSFiddle - React, Tailwind, and code Playground

HTML

<ol class="dd-list">
            <li class="dd-item dd3-item" id="002-32-323" >
                <div class="dd-handle dd3-handle"></div>
                <div class="dd3-content">Home</div>
                <div class="url" style="display:none;">homeurl</div>

            </li>
            <li class="dd-item dd3-item" id="20ss-dsds">
                <div class="dd-handle dd3-handle"></div>
                <div class="dd3-content">About Us</div>
                <div class="url" style="display:none;">abouturl</div>
            </li>
            <li class="dd-item dd3-item" id="23-x22399">
                <div class="dd-handle dd3-handle"></div>
                <div class="dd3-content">Pricing</div>
                <div class="url" style="display:none;">pricingurl</div>
                <ol class="dd-list">
               
                    <li class="dd-item dd3-item" id="022-999-32" >
                        <div class="dd-handle dd3-handle"></div>
                        <div class="dd3-content">test</div>
                        <div class="url" style="display:none;">testurl</div>
                    </li>
                </ol>
            </li>
          </ol>

JavaScript

$(".dd-list li").click(function(event){
    
            var id = $(this).attr('id');
            alert(id);
            
            /*I need to change the li clicked dd3-content
              to the word 'hello' */
    
            alert($(this).find('.dd3-content').html());
            alert($(this).find('.url').html());
            event.stopPropagation();
        });