Question: I am trying to hide the title, "City", when someone clicks on a div. For ex. if a click on Victoria div, then title, "City", is hidden for that div only, other divs remain unaffected. If you click on Toronto div, its title "City" is hidden and title of Victoria div is shown. It's similar to my previous question, "How to use same onclick function multiple times in php page?", but it won't work here. Any solution with javascript, Jquery?

[![enter image description here](https://i.stack.imgur.com/EgpJP.png)](https://i.stack.imgur.com/EgpJP.png)

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: 
I think below solution may be helpfull to you , create a click event of the div , and find the class 'CityTitle' which you right in you code and hide using the class. Try this code:

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

```

I hope this will help to you.
```js
$('.cityName').click(function(){
  $(this).parent().find('.cityHeading').hide();
})
```

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

```html
<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>
```

Hope this makes you happy