Get closest element by id Jquery

Question

I have js code that populate div with some html :

 function InvestigationList() {
    var id = $('#idval').text();
    //alert(id);
    var model = {
        id: parseInt(id)
    };
    $.ajax({
        url: '@Url.Action("ListofInvestigations", "PatientDatabase")',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(model),
        type: 'POST',
        dataType: 'json',
        processData: false,
        success: function(data) {
            var list = data;
            for (var i = 0; i <= list.length - 1; i++) {
                var investigationList = '<p  style=" color: #1d69b4; font-size: 18px;">'
                    + '<b style=" color: #1d69b4; font-size: 20px;" >Finding from:</b> ' + '<b id="idvalue" style="display:none">' + list[i].id + '</b>'+'<b id="findingval">'+list[i].start +'</b>'+ '</p>'
                    + '<p><b style=" color: #1d69b4; font-size: 20px;">Notice</b></p>'
                    +'<p style=" color: #1d69b4; font-size: 18px;">' +list[i].notice+'</p>';
                $('#panel3').append('<div>' + investigationList + '</div>');
            }
        }
});
}

I need to get findingval by click on it and idvalue

I write this code :

 $(document).on('click',
    '#findingval',
    function () {
        var findingval = $(this).text();
        alert(findingval);
        var idvalue = $(this).closest('#idvalue').text();
        alert(idvalue);

    });

Finding val is working great, but idavalue isn't getting.

What I doing wrong?

Answer 1

The id attribute should be unique in the same document so please replace the duplicate ones by the common classes.

When you change all the duplicate ids by common classes you should use these classes on your JS code like :

$(document).on('click','.findingval',function () {
  var findingval = $(this).text();
  console.log(findingval);

  var idvalue = $(this).siblings('.idvalue').text();
  console.log(idvalue);
});

Hope this helps.

 $(document).on('click', '.findingval', function() { var findingval = $(this).text(); console.log(findingval); var idvalue = $(this).siblings('.idvalue').text(); console.log(idvalue); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <p style=" color: #1d69b4; font-size: 18px;"> <b style=" color: #1d69b4; font-size: 20px;">Finding from:</b> <b class="idvalue" style="display:none">idvalue 1</b> <b class="findingval">findingval 1</b> </p> <p style=" color: #1d69b4; font-size: 18px;"> <b style=" color: #1d69b4; font-size: 20px;">Finding from:</b> <b class="idvalue" style="display:none">idvalue 2</b> <b class="findingval">findingval 2</b> </p> <p style=" color: #1d69b4; font-size: 18px;"> <b style=" color: #1d69b4; font-size: 20px;">Finding from:</b> <b class="idvalue" style="display:none">idvalue 3</b> <b class="findingval">findingval 3</b> </p> </div>