JQuery doesn't work foreach loop button

Question

Hey guys I'm working on my new MVC app but... The function I want to have with this code doesn't work. When the user clicks on a Task, it has to appear in the paragraph. As you can see the function only works with the first table item.

 $(document).ready(function(){
        $("#btnAdd").click(function () {
            var task = $('#taskDescription').val();
            $("#paragraph").append(task, "    <button>-</button></br>");
        });
    });

.table-left {
            width: 30%;
            display: inline-block;
        }
        tbody {
            overflow: scroll;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-left">
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>Dienst</th>

        </tr>
        </thead>
        <tbody>
        
            <tr>
                <td>hey</td>
                <td><button id="btnAdd">+</button></td>
                <input type="hidden" id="taskDescription"   value="hey" />
            </tr>
            <tr>
                <td>hi</td>
                <td><button id="btnAdd">+</button></td>
                <input type="hidden" id="taskDescription"   value="hi" />
            </tr>
            <tr>
                <td>hello</td>
                <td><button id="btnAdd">+</button></td>
                <input type="hidden" id="taskDescription"   value="hello" />
            </tr>
            <tr>
                <td>bye</td>
                <td><button id="btnAdd">+</button></td>
                <input type="hidden" id="taskDescription"   value="bye" />
            </tr>
       
        </tbody>
    </table>
</div>
<p id="paragraph"></p>

Who knows what to do? I read this post: Why the jQuery Selectable plugin doesn't work with a foreach generated list?

But it doesn't seem to solve my problem

Carsten Løvbo Andersen · Accepted Answer · 2017-11-10 08:48:38Z

1

You should never have multiple elements with the same ID. An ID should ALWAYS be unique

Second, to get the value of the taskDescription that is associated with the clicked btnAdd, use $(this).closest('tr').find('.taskDescription').val()

$(document).ready(function() {
  $(".btnAdd").click(function() {
    var task = $(this).closest('tr').find('.taskDescription').val();
    $("#paragraph").append(task, "<button>-</button></br>");
  });
});

Working example of your code

$(document).ready(function() {
  $(".btnAdd").click(function() {
    var task = $(this).closest('tr').find('.taskDescription').val();
    $("#paragraph").append(task, "<button>-</button></br>");
  });
});

.table-left {
  width: 30%;
  display: inline-block;
}

tbody {
  overflow: scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-left">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Dienst</th>

      </tr>
    </thead>
    <tbody>

      <tr>
        <td>hey</td>
        <td><button class="btnAdd">+</button></td>
        <input type="hidden" class="taskDescription" value="hey" />
      </tr>
      <tr>
        <td>hi</td>
        <td><button class="btnAdd">+</button></td>
        <input type="hidden" class="taskDescription" value="hi" />
      </tr>
      <tr>
        <td>hello</td>
        <td><button class="btnAdd">+</button></td>
        <input type="hidden" class="taskDescription" value="hello" />
      </tr>
      <tr>
        <td>bye</td>
        <td><button class="btnAdd">+</button></td>
        <input type="hidden" class="taskDescription" value="bye" />
      </tr>

    </tbody>
  </table>
</div>
<p id="paragraph"></p>

answered Nov 10, 2017 at 8:48

Carsten Løvbo Andersen

27.1k10 gold badges53 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Salomé Over a year ago

Oh ofcourse an id should be unique.. Thanks for your fast reply! I appreciate it

Salomé Over a year ago

Yes it does! :)

Carsten Løvbo Andersen Over a year ago

@daphne If any of the answers helped you, you should consider marking one of them as answer, so others users can see what solved your problem

Lalji Tadhani · Accepted Answer · 2017-11-10 08:55:41Z

Change ID To Class Change Jquery

$(document).ready(function(){
        $(".btnAdd").click(function () {

            var task = $(this).parent().next('input').val();
            $("#paragraph").append(task, "    <button>-</button></br>");
        });
    });

$(document).ready(function(){
        $(".btnAdd").click(function () {
        
            var task = $(this).parent().next('input').val();
            $("#paragraph").append(task, "    <button>-</button></br>");
        });
    });

.table-left {
            width: 30%;
            display: inline-block;
        }
        tbody {
            overflow: scroll;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-left">
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>Dienst</th>

        </tr>
        </thead>
        <tbody>
        
            <tr>
                <td>hey</td>
                <td><button class="btnAdd">+</button></td>
                <input type="hidden" class="taskDescription"   value="hey" />
            </tr>
            <tr>
                <td>hi</td>
                <td><button class="btnAdd">+</button></td>
                <input type="hidden" class="taskDescription"   value="hi" />
            </tr>
            <tr>
                <td>hello</td>
                <td><button class="btnAdd">+</button></td>
                <input type="hidden" class="taskDescription"   value="hello" />
            </tr>
            <tr>
                <td>bye</td>
                <td><button class="btnAdd">+</button></td>
                <input type="hidden" class="taskDescription"   value="bye" />
            </tr>
       
        </tbody>
    </table>
</div>
<p id="paragraph"></p>

Suraj Rao · Accepted Answer · 2021-09-27 08:39:09Z

0

in your button tag, change your id to class. and change # in your javascript to .
example :

<button type="button" id="blablabla"></button>, change to <button type="button" class="blablabla"> <br>

and in your javascript change :

$(#blablabla) to $(.blablabla)

edited Sep 27, 2021 at 8:39

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Sep 27, 2021 at 8:38

Muhammad Putrawan Mahardika

112 bronze badges

Collectives™ on Stack Overflow

JQuery doesn't work foreach loop button

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related