How to hide the heading "City" when clicking on this div on php page?

Question

I am trying to hide the heading "City" when someone clicks on a div. E.g. if you click on the div Victoria, then the heading "City" is hidden only for this div, other divs remain unchanged. If you click on the Toronto div, its “City” heading is hidden and the name of the Victoria div will be displayed. This is similar to my previous question: “How to use the same onclick function several times on a php page?”, But this will not work here. Any solution with javascript, jQuery?

Php Code:

<?php
$link = mysqli_connect("localhost", "root", "", "test");
// Check connection
if($link === false)
{
 die("ERROR: Could not connect. " . mysqli_connect_error());
}
// Attempt select query execution
   $sql = "SELECT * FROM sample";
   if($result = mysqli_query($link, $sql))
{
   if(mysqli_num_rows($result) > 0)
{

    while($row = mysqli_fetch_array($result))
    {
            echo "<div style='border: 2px solid black;'><p class='CityTitle".$row['id']."'>City</p>". $row['UserCity'] ."</p></div></br>";
    }
    // Close result set
    mysqli_free_result($result);
  } 
   else
  {
    echo "No records matching your query were found.";
  }
 } 
  else
 {
   echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
 }
  // Close connection
  mysqli_close($link);
 ?>

Answer 1

You need the following behavior:

$(document).ready(function() {
  $(".cityContainer > div").click(function() {
    $(".cityContainer").find(".active").removeClass("active");
    $(this).addClass("active");
  });
});

.active .CityTitle {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="cityContainer">

  <div style='border: 2px solid black;'>
    <p class='CityTitle'>City</p>Victoria</div>
  </br>

  <div style='border: 2px solid black;'>
    <p class='CityTitle'>City</p>Toronto</div>
  </br>

 <div style='border: 2px solid black;'>
    <p class='CityTitle'>City</p>Ottawa</div>
  </br>

</div>

Answer 2

, , div CityTitle, . :

$('document').on('click','div',function(){
    $(this).find('.CityTitle').hide();
})

, .

Answer 3

$('.cityName').click(function(){
  $(this).parent().find('.cityHeading').hide();
})

.cityBorder{border:1px solid #000; padding:10px; margin-bottom:10px}
.cityHeading{display:block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cityBorder"><div class="cityHeading">City</div><div class="cityName">Ottawa</div></div>
<div class="cityBorder"><div class="cityHeading">City</div><div class="cityName">victoria</div></div>
<div class="cityBorder"><div class="cityHeading">City</div><div class="cityName">st.john's</div></div>
<div class="cityBorder"><div class="cityHeading">City</div><div class="cityName">Totonto</div></div>
<div class="cityBorder"><div class="cityHeading">City</div><div class="cityName">quebee city</div></div>

Run code

Hope it pleases you.