Compare prop "title" and "id" of different elements if they match

html:

<div class="box-one">
 <img title="element_a">
 <img title="element_b">
 <img title="element_c">
 <img title="element_d">
</div>

<div class="box-two">
 <div id="element_a"></div>
 <div id="element_b"></div>
 <div id="element_c"></div>
 <div id="element_d"></div>
</div>

How can I check (with jQuery) by clicking on an <img> at "box-one", if there is also a <div> that machtes with the ID in "box-two"?

Example:

If I click on <img title="element a">, the <div id="element a"> should be the only one that got an extra class called "found".

My bad try:

$('.box-one img').click(function() {
	$(this).each( function(){

		var elementTitle = $('.box-one img').prop('title');
		var elementTable = $('.box-two div').prop('id');
		
        // this part is a shame, sry 4 that //
		if (elementTitle) == (elementTable) {
			$(this).addClass("found");
		}

	});
});

<div class="box-one">
 <img data-title="element a">
 <img data-title="element b">
 <img data-title="element c">
 <img data-title="element d">
</div>

<div class="box-two">
 <div id="element a"></div>
 <div id="element b"></div>
 <div id="element c"></div>
 <div id="element d"></div>
</div>



const boxOne = document.querySelectorAll('.box-one img');
const boxTwo = document.querySelectorAll('.box-two div');

// boxOne[0].dataset.title - get title for the first element
// boxTwo[0].id - get id for the first element

    boxOne.forEach((item) => {
      boxTwo.forEach(div => {
        if (item.dataset.title === div.id) {
          // your custom logic
        }
      })
    })

Try this.

I think you need each loop for a divs in box-two, instead of an clicked image,
so you can compare the title of clicked image with all id of div in box-two.

$('.box-one img').click(function() {
    var elementTitle  = $(this).prop('title);

    $('div.box-two').find('div').each( function(){
        var elementTable = $('.box-two div').prop('id');

        <!-- this part is a shame, sry 4 that --->
        if (elementTitle) == (elementTable) {
            $(this).addClass("found");
        }

    });
});

This is really easy to achieve without any jQuery. I have added some basic CSS so things can be tried out. Find the code commented below:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const boxOne = document.querySelector('.box-one');

// we're adding a so-called "delegate listener" on the parent element of the images
// click events "bubble" upwards in the DOM, we're catching it at <div class="box-one">
boxOne.addEventListener('click', function(event) {
  // the element that received the click is available as event.target
  if (event.target.tagName === 'IMG' && event.target.title) { // if an img was clicked
    // find the div whose id corresponds to the title of the img that was clicked
    const div = document.getElementById(event.target.title);
    if (div) { // if that div exists
      div.classList.add('found'); // add found to its classlist
    }
  }
})

<!-- language: lang-css -->

.box-one {
  border: 1px solid #f2f2f2;
}

.box-one img {
  background-color: #f2f2f2;
  padding: 10px;
}

.box-two {
  border: 1px solid #e8e8e8;
}

.box-two div {
  border: 1px solid #ddd;
  padding: 10px;
}

div.found {
  border-color: green;
}

div.found::before {
  content: "Found!";
}

<!-- language: lang-html -->

<div class="box-one">
  <img title="element a">
  <img title="element b">
  <img title="element c">
  <img title="element d">
</div>

<div class="box-two">
  <div id="element a"></div>
  <div id="element b"></div>
  <div id="element c"></div>
  <div id="element d"></div>
</div>

<!-- end snippet -->

I found this while searching on SO: https://stackoverflow.com/a/3373767/9590929

Also with vanilla JavaScript, you don't need the hash (#) e.g. document.getElementById('id_here') , however when using jQuery, you do need to put hash to target elements based on id just like CSS.

Your if-statement is incorrect and might cause instability.

$('.box-one img').click(function() {
    $(this).each( function(){

        var elementTitle = $('.box-one img').prop('title'); // wrong, will always get the title for the first .box-one img
        var elementTable = $('.box-two div').prop('id'); // wrong, will always get the id for the first .box-two div

        if (elementTitle == elementTable) {
            alert("found");
        }

    });
});

To comply with your answer you could do something like this

$(".box-one img").on("click", function () {
    var title = $(this).prop("title");
    $(".box-two #" + title).addClass("found");
});

Please make it simple and ignore container box-two because your already put the elementId in your box one image attributes.

$('.box-one img').click(function() {
     var target_id = $(this).attr('title');
     $('#'+target_id).addClass("found");
});