.click() function doesn't work when button is clicked

Question

I am currently doing my final project in CS50, but have hit my first real struggle and can't seem to solve the problem.

I have a webpage in which the user can see all his or hers goals and the steps to complete these goals. Besides the steps is a number of successes needed to complete that step in the format "0/7". I wish to have two buttons to the right, one for completed the step and one for failed to do the step. When the completed step is clicked it should run a function in JS to increment the number by one, if the failed to do button is clicked it should decrement. However when I click either of the buttons nothing happens. I have used flask and sqlite for some of the data.

Here is my HTML in it's entirety. It's an extension of my layout.html. The indentation may be a bit off in the code sample.

{% extends "layout.html" %}

{% block title %}
Goals
{% endblock %}

{% block main %}
<div class="wrap">
  <h1>Welcome to Your Goals Board</h1>
  <br>
  {% if numOfGoals == 0 %}
    <h2> No Current Goals</h2>
    <br>
    <p> Add a goal <a href="/addGoal">HERE</a></p>
  {% else %}
        {% for goal in goals %}
            <h2>Goal</h2>
            <br>
            <h5 class="floatLeft"><strong>Goal:</strong> {{ goal.goalName }}</h5>

            <!-- Vision link table with deadline -->
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th scope="col" colspan="4">Link to Vision</th>
                  <th scope="col" class="stepSuccess">Deadline</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td colspan="4">{{ goal.visionLink }}</td>
                  <td colspan="1">{{ goal.deadline }}</td>
                </tr>
              </tbody>
            </table>
            <br>

            <h5 class="floatLeft"><strong>Steps</strong></h5>
            <!-- Steps table with subgoals -->
            {% if goal.step1 %}
            <table class="table table-bordered">
              <tbody>
                <tr>
                  <th scope="row" colspan="1" class="stepNum">Step 1</th>
                  <td colspan="4" class="stepDiscrib">{{ goal.step1 }}</td>
                  <td colspan="1" class="stepSuccess"><span class="currentComple">0</span>/<span class="goalComple">{{ goal.successions1 }}</span>
                  <button class="btn btn-outline-danger floatRight stepFailBtn" type="button"><i class="fas fa-times"></i></button>
                  <button class="btn btn-outline-success floatRight stepDoneBtn" type="button"><i class="fas fa-check"></i></button></td>
                </tr>
              </tbody>
            </table>
            {% endif %}
            {% if goal.step2 %}
            <table class="table table-bordered">
              <tbody>
                <tr>
                  <th scope="row" colspan="1" class="stepNum">Step 2</th>
                  <td colspan="4" class="stepDiscrib">{{ goal.step2 }}</td>
                  <td colspan="1" class="stepSuccess"><span class="currentComple">0</span>/<span class="goalComple">{{ goal.successions2 }}</span>
                  <button class="btn btn-outline-danger floatRight stepFailBtn" type="button"><i class="fas fa-times"></i></button>
                  <button class="btn btn-outline-success floatRight stepDoneBtn" type="button"><i class="fas fa-check"></i></button></td>
                </tr>
              </tbody>
            </table>
            {% endif %}
            {% if goal.step3 %}
            <table class="table table-bordered">
              <tbody>
                <tr>
                  <th scope="row" colspan="1" class="stepNum">Step 3</th>
                  <td colspan="4" class="stepDiscrib">{{ goal.step3 }}</td>
                  <td colspan="1" class="stepSuccess"><span class="currentComple">0</span>/<span class="goalComple">{{ goal.successions3 }}</span>
                  <button class="btn btn-outline-danger floatRight stepFailBtn" type="button"><i class="fas fa-times"></i></button>
                  <button class="btn btn-outline-success floatRight stepDoneBtn" type="button"><i class="fas fa-check"></i></button></td>
                </tr>
              </tbody>
            </table>
            {% endif %}
            {% if goal.step4 %}
            <table class="table table-bordered">
              <tbody>
                <tr>
                  <th scope="row" colspan="1" class="stepNum">Step 4</th>
                  <td colspan="4" class="stepDiscrib">{{ goal.step4 }}</td>
                  <td colspan="1" class="stepSuccess"><span class="currentComple">0</span>/<span class="goalComple">{{ goal.successions4 }}</span>
                  <button class="btn btn-outline-danger floatRight stepFailBtn" type="button"><i class="fas fa-times"></i></button>
                  <button class="btn btn-outline-success floatRight stepDoneBtn" type="button"><i class="fas fa-check"></i></button></td>
                </tr>
              </tbody>
            </table>
            {% endif %}
            {% if goal.step5 %}
            <table class="table table-bordered">
              <tbody>
                <tr>
                  <th scope="row" colspan="1" class="stepNum">Step 5</th>
                  <td colspan="4" class="stepDiscrib">{{ goal.step5 }}</td>
                  <td colspan="1" class="stepSuccess"><span class="currentComple">0</span>/<span class="goalComple">{{ goal.successions5 }}</span>
                  <button class="btn btn-outline-danger floatRight stepFailBtn" type="button"><i class="fas fa-times"></i></button>
                  <button class="btn btn-outline-success floatRight stepDoneBtn" type="button"><i class="fas fa-check"></i></button></td>
                </tr>
              </tbody>
            </table>
            {% endif %}
            {% if goal.step6 %}
            <table class="table table-bordered">
              <tbody>
                <tr>
                  <th scope="row" colspan="1" class="stepNum">Step 6</th>
                  <td colspan="4" class="stepDiscrib">{{ goal.step6 }}</td>
                  <td colspan="1" class="stepSuccess"><span class="currentComple">0</span>/<span class="goalComple">{{ goal.successions6 }}</span>
                  <button class="btn btn-outline-danger floatRight stepFailBtn" type="button"><i class="fas fa-times"></i></button>
                  <button class="btn btn-outline-success floatRight stepDoneBtn" type="button"><i class="fas fa-check"></i></button></td>
                </tr>
              </tbody>
            </table>
            {% endif %}
            {% if goal.step7 %}
            <table class="table table-bordered">
              <tbody>
                <tr>
                  <th scope="row" colspan="1" class="stepNum">Step 7</th>
                  <td colspan="4" class="stepDiscrib">{{ goal.step7 }}</td>
                  <td colspan="1" class="stepSuccess"><span class="currentComple">0</span>/<span class="goalComple">{{ goal.successions7 }}</span>
                  <button class="btn btn-outline-danger floatRight stepFailBtn" type="button"><i class="fas fa-times"></i></button>
                  <button class="btn btn-outline-success floatRight stepDoneBtn" type="button"><i class="fas fa-check"></i></button></td>
                </tr>
              </tbody>
            </table>
            {% endif %}
            {% if goal.step8 %}
            <table class="table table-bordered">
              <tbody>
                <tr>
                  <th scope="row" colspan="1" class="stepNum">Step 8</th>
                  <td colspan="4" class="stepDiscrib">{{ goal.step8 }}</td>
                  <td colspan="1" class="stepSuccess"><span class="currentComple">0</span>/<span class="goalComple">{{ goal.successions8 }}</span>
                  <button class="btn btn-outline-danger floatRight stepFailBtn" type="button"><i class="fas fa-times"></i></button>
                  <button class="btn btn-outline-success floatRight stepDoneBtn" type="button"><i class="fas fa-check"></i></button></td>
                </tr>
              </tbody>
            </table>
            {% endif %}
            {% if goal.step9 %}
            <table class="table table-bordered">
              <tbody>
                <tr>
                  <th scope="row" colspan="1" class="stepNum">Step 9</th>
                  <td colspan="4" class="stepDiscrib">{{ goal.step9 }}</td>
                  <td colspan="1" class="stepSuccess"><span class="currentComple">0</span>/<span class="goalComple">{{ goal.successions9 }}</span>
                  <button class="btn btn-outline-danger floatRight stepFailBtn" type="button"><i class="fas fa-times"></i></button>
                  <button class="btn btn-outline-success floatRight stepDoneBtn" type="button"><i class="fas fa-check"></i></button></td>
                </tr>
              </tbody>
            </table>
            {% endif %}
            {% if goal.step10 %}
            <table class="table table-bordered">
              <tbody>
                <tr>
                  <th scope="row" colspan="1" class="stepNum">Step 10</th>
                  <td colspan="4" class="stepDiscrib">{{ goal.step10 }}</td>
                  <td colspan="1" class="stepSuccess"><span class="currentComple">0</span>/<span class="goalComple">{{ goal.successions10 }}</span>
                  <button class="btn btn-outline-danger floatRight stepFailBtn" type="button"><i class="fas fa-times"></i></button>
                  <button class="btn btn-outline-success floatRight stepDoneBtn" type="button"><i class="fas fa-check"></i></button></td>
                </tr>
              </tbody>
            </table>
            {% endif %}
            <h5 class="floatLeft"><strong>Subgoals:</strong> {{goal.subgoals}}</h5>
            <br>
            <br>
            <br>
            <button class="btn btn-outline-primary" id="goalComplete" type="button">Goal Completed!</button>
            <hr class="goalSeperator">
            <br>
      {% endfor %}
    {% endif %}
</div>
{% endblock %}

and here is my JS

$(".stepDoneBtn").click(function() {

    var td = $(this).parent();
    var current = Number(td.find(".currentComple").text());
    var goal = Number(td.find(".goalComple").text());

    if (current < goal)
    {
        current++;
        td.find(".currentComple").text(current);
    }

    if (current == goal)
    {
        td.closest("tr").css("color", "#D3D3D3");
    }

});


$(".stepFailBtn").click(function() {

    var td = $(this).parent();
    var current = Number(td.find(".currentComple").text());
    var goal = Number(td.find(".goalComple").text());

    if (current < goal && current > 0)
    {
        current--;
        td.find(".currentComple").text(current);
    }

});

It should be said that this table in my HTML sample is one of many since I use flask and a for loop to insert tables and table rows from a sqlite db. So there's many rows with these two buttons at the end of each row.

Hope someone can help out:)

It Works! Seemed to be a problem with the binding of the JS function and the buttons, because the front end was rendered after. Event delegation worked.

Swapping

$(".stepDoneBtn").click(function() {...});

to 

$(document).on('click', ".stepDoneBtn", function() {...});

Made it work! Thanks to all who helped out!

Answer 1

You have a bunch of little errors. You need to take it one step at a time and use console.log() to figure out what is going on. First issue is you have a class, and you use an id selector. You mix DOM methods and jQuery methods, You use strings and not variables.

Here is the code with comments where you went wrong, you can fix the other button yourself.

 // $("#stepDoneBtn").click(function() { needs to be a class $(".stepDoneBtn").click(function() { var td = $(this).parent(); var current = Number(td.find(".currentComple").text()); var goal = Number(td.find(".goalComple").text()); if (current < goal) { current++; // td.find(".currentComple").innerHTML = "current"; <-- not the variable not how jQuery sets html td.find(".currentComple").text(current); } if (current == goal) { td.closest("tr").css("color", "#D3D3D3"); } });

 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="table table-bordered"> <tbody> <tr> <th scope="row" colspan="1" class="stepNum">Step 1</th> <td colspan="4" class="stepDiscrib">{{ goal.step1 }}</td> <td colspan="1" class="stepSuccess"> <span class="currentComple">0</span>/<span class="goalComple">4</span> <button class="btn btn-outline-danger floatRight stepFailBtn" type="button"><i class="fa fa-times"></i></button> <button class="btn btn-outline-success floatRight stepDoneBtn" type="button"><i class="fa fa-check"></i></button></td> </tr> </tbody> </table>