There are several blocks with the same class, by typing a function that compares the text of the block with a field from the table in the database, and after sampling displays information on it. While there was one block with the class on which the event was imposed, everything worked fine, he added the second one - it stopped outputting anything. Actually the question: How to implement it normally, in the future I will output the blocks in a cycle?

function getDetails() { var name = $('.catName').text(); $.ajax({ type: 'POST', url: 'demo.php', data: {nickname:name}, success: function (data) { $('.catInfo').html(data); } }); } 
 <div class="catName" id="cat1" onclick="getDetails()">Мурзик</div> <div class="catName" id="cat2" onclick="getDetails()">Барсик</div> 

 <?php $name = $_POST['nickname']; $link = mysqli_connect("localhost","study","study","study_db"); $query ="SELECT content FROM cats where namee= '$name' " ; $result = mysqli_query($link, $query) or die("Ошибка " . mysqli_error($link)); $row=mysqli_fetch_array($result); echo $row['content']; mysqli_free_result($result); ?>

    2 answers 2

    It's ok to implement it like this:

     $(".catName").click(getDetails); function getDetails(e) { var div = this; $.ajax({ type: 'POST', url: 'demo.php', data: { nickname: $(div).text() }, success: function(data) { $(div).html(data); } }); console.log("clicked - " + $(div).text()); } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="catName" id="cat1">Мурзик</div> <div class="catName" id="cat2">Барсик</div>

      You in this line get all the elements with the .catName selector, and these are 2 elements !, they will be glued together. var name = $ ('. catName'). text ();