JSFiddle - React, Tailwind, and code Playground

HTML

<div class="ddpan02">
    <div class="ddBoxHold">
          <div class="ddBox">
                <asp:TextBox ID="txtCat" runat="server" Value="Buy" ReadOnly="true"></asp:TextBox>
                <asp:HiddenField ID="hdnTypeId" runat="server" Value="0" />
                <span></span>
          </div>
          <div class="ddList">
               <div class="ddListData">
                  <ul>
                  </ul>
               </div>
         </div>
    </div>
</div>

JavaScript

var ajaxResponse = '<?xml version="1.0" encoding="utf-8"?><Root><Item><Property_Cat_ID>1</Property_Cat_ID><Property_Cat_Name>Buy</Property_Cat_Name></Item><Item><Property_Cat_ID>2</Property_Cat_ID><Property_Cat_Name>Rent</Property_Cat_Name></Item></Root>';


// NOTE: Concatinating the two click event handlers lets you control the order of whats to be done.
$("div.ddListData ul").on('click', 'li', function() {
    
    console.log('Triggered click event, this =', this); // DEBUG

    // Call getValue()
    getValues(0); // function which does dynamic value assigning work to all my fields
    
    // NOTE: Declaring elements to reduce lookups
    var $this = $(this);
    var $parent = $this.parent('ul').parent('div').parent('div');
    var $ddBoxes = $parent.prev('.ddBox');
    // NOTE: You should be able to find a shorter way to select the element(s).
    
    // Hide .ddBoxes and set value of its first input
    $ddBoxes.hide().find('input:first').val($this.html());
    
    // Set value of the last input
    $ddBoxes.find('input:last').val(this.id);
    
    // Hide some parent element
    $parent.hide();
});

var getValues = function(value) {
    console.log('getValue(' + value + ')');
};

// Temporary function to populate the <ul> with values from the XML
var populateMyList = function (data) {

    console.log('XML =', data); // DEBUG

    var $xml = $(data);
    var $items = $xml.find('Item');

    console.log('items =', $items); // DEBUG

    $items.each(function (index) {

        var $this = $(this);
        
        var id = $this.find('Property_Cat_ID').text();
        var name = $this.find('Property_Cat_Name').text();
        
        console.log(id, name); // DEBUG
        
        if (index == 0) { // First item

            // NOTE: Your HTML doesn´t contain any input elements and these are some crazy selectors that you should be able to shorten.
            
            //$("div.tabdpan02").find("div.ddpan div.ddpan01 div.ddBoxHold div.ddBox...