How to fetch div value with specific id using Jquery?

Question

I have list of data with add button . On button click how to get value of div with id="rnumber" with jquery .i want number on button click. i don't know how to get that number i try but every time i get first number of list i want number of same class . ex. if i click on second li button still i get first li class div value . I try with parents and child selector but i don't get anwser.

<div class="modal-body">
    <ul class="searchresult" style="list-style-type: none;">
        <li>
            <div  class="kt-font-lg">AKash</div>
            <div  class="kt-font-lg rnumber" >1234567890</div>
            <button  class="kt-font-lg btn-primary " onclick="addNumber()">Add</button>
        </li>
        <li>
            <div  class="kt-font-lg">Deep</div>
            <div  class="kt-font-lg rnumber" >9012345678</div>
            <button  class="kt-font-lg btn-primary " onclick="addNumber()">Add</button>
        </li>
    </ul>
</div>

onClick function :

function addNumber(){
                rnumber = $('#rnumber');
                var  ttt = rnumber.text();
                console.log(ttt);        
             }

You mean to say, you can use something like this, right? `$("#rnumber")`? — Praveen Kumar Purushothaman, May 19 '20 at 05:48
your HTML is invalid, you have 2 `
`s with the same `id` attribute. — ROOT, May 19 '20 at 05:50
@Meet I have answered and solved your question. Kindly check my answer. — Praveen Kumar Purushothaman, May 19 '20 at 05:52
@Meet: Praveen has posted the correct answer below. Have a look — Milind Anantwar, May 19 '20 at 05:53

score 3 · Accepted Answer · answered May 19 '20 at 05:50

You have to keep your IDs unique. Duplicating IDs is a crime. Change it to a class instead. Since multiple elements share the same function, use event.target or this. You can use something like this:

function addNumber() {
  console.log($(event.target).prev().text());
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body">
  <ul class="searchresult" style="list-style-type: none;">
    <li>
      <div class="kt-font-lg">AKash</div>
      <div class="kt-font-lg rnumber">1234567890</div>
      <button class="kt-font-lg btn-primary" onclick="addNumber()">Add</button>
    </li>
    <li>
      <div class="kt-font-lg">Deep</div>
      <div class="kt-font-lg rnumber">9012345678</div>
      <button class="kt-font-lg btn-primary" onclick="addNumber()">Add</button>
    </li>
  </ul>
</div>

In a better way, use unobtrusive JavaScript event handling:

$(function () {
  $(".btn-primary").click(function () {
    console.log($(this).prev().text());
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body">
  <ul class="searchresult" style="list-style-type: none;">
    <li>
      <div class="kt-font-lg">AKash</div>
      <div class="kt-font-lg rnumber">1234567890</div>
      <button class="kt-font-lg btn-primary">Add</button>
    </li>
    <li>
      <div class="kt-font-lg">Deep</div>
      <div class="kt-font-lg rnumber">9012345678</div>
      <button class="kt-font-lg btn-primary">Add</button>
    </li>
  </ul>
</div>

score 0 · Answer 2 · answered May 19 '20 at 05:56

Note that you have invalid HTML by using same Id attribute value on two <div>s I changed it to class attribute, here is a working snippet using .prev() method and also note how I passed the element to the event handler:

function addNumber(el){
  const text = $(el).prev().text();
  console.log(text);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body">
    <ul class="searchresult" style="list-style-type: none;">
        <li>
            <div  class="kt-font-lg">AKash</div>
            <div  class="kt-font-lg " class="rnumber">1234567890</div>
            <button  class="kt-font-lg btn-primary " onclick="addNumber(this)">Add</button>
        </li>
        <li>
            <div  class="kt-font-lg">Deep</div>
            <div  class="kt-font-lg " class="rnumber">9012345678</div>
            <button  class="kt-font-lg btn-primary " onclick="addNumber(this)">Add</button>
        </li>
    </ul>
</div>

score 0 · Answer 3 · answered May 19 '20 at 06:01

$(".click-number").click(function(){
  var rnumber = $(this).data('rnumber');
  console.log(rnumber);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal-body">
    <ul class="searchresult" style="list-style-type: none;">
        <li>
            <div  class="kt-font-lg">AKash</div>
            <div  class="kt-font-lg ">1234567890</div>
 <button  class="kt-font-lg btn-primary click-number" data-rnumber="1234567890">Add</button>
        </li>
        <li>
            <div  class="kt-font-lg">Deep</div>
            <div  class="kt-font-lg ">9012345678</div>
 <button  class="kt-font-lg btn-primary click-number" data-rnumber="9012345678">Add</button>
        </li>
    </ul>
</div>

You cannot set the same id with two div elements class click-number is the easy way. Put the number as data-rnumber and get it in jquery.

How to fetch div value with specific id using Jquery?

3 Answers3