Estoy usando jquery para vincular un clic en un botón. En esta var testId, obtengo la identificación del botón y var showmoreId obtiene la identificación de un div, pero el problema es que onclick se vincula con el li, por lo que cuando hago clic en cualquier lugar de li, onclick funciona, pero quiero que funcione al hacer clic en el botón. y también quiero la identificación del div al hacer clic, pero no quiero que li funcione al hacer clic, entonces, ¿qué puedo hacer para solucionarlo?

 async function userData(userdata) { let newValue = ""; userdata.forEach(max=> { let add = `<div class="rb-container"> <ul class="rb"> <li> <div> <p>${max.name}</p> <div> <p>${max.email}</p> <button id="showMoreLess_${max.id}" data-order-id="${max.id}">View More</button> </div> <div id="showme_${max.id}" class="showBlock" style="display:none";> <div> <div> <p>Quantity:</p> <p>${max.volume}</p> </div> <div> <p>${max.group_email}</p> <p>Group_Email</p> </div> </div> </div> </div> </li> </ul> </div>` newValue += add ; let container = document.querySelector('.user-details'); container.innerHTML = newValue; } $(document).ready(function() { $('.rb-container li').unbind('click'); $('.rb-container li').on('click', function () { var testId = $(this).find('button').attr('id'); var showmoreId = ($(this).find('div > div').next().attr('id')); viewFullDetails(testId, showmoreId); });