Get value from an input with Jquery

Question

I have found a lot of answers to this type of question but none are solving the problem. I even have a very similar piece of code that works. However, this keeps giving a NaN . I have narrowed it down to not being able to get the value of

var or = parseFloat($(this).siblings("input[name='or']").val());

Here is what I have. Any help is greatly appreciated!

<tbody>
  {% for i in t %}
  <tr class="hotlines">
    <td><strong>{{i.owner}}</strong><br>{{i.owner_id}}</td>
    <td>
      <li>{{i.tot_itm}}</li>
      <li>Per Piece Profit: {{"${:,.2f}".format(i.item_prof)}}</li>
    </td>
    <td>
      <li>Payable Hotlines <br><input type="text" name="hln" maxlength="4" value=""></li>
      <li>Per Hotline Profit: {{"${:,.2f}".format(i.hotline_prof)}}</li>
      <input type="text" name="or" value="{{i.hotline_prof}}">
    </td>
    <td>
      <li>Total Backpack Profit: {{"${:,.2f}".format(i.tot_prof)}}</li>
      <li>Total Hotline Profit: <input type="text" name="hlnt" readonly /></li>
    </td>
  </tr>
  <!-- Total items sent from db -->
  <input class="hidden" type="text" name="it" value="{{i.tot_itm}}">
  <!-- per hotline override from db -->

  <!-- profit from all items * per item override sent from server -->
  <input class="hidden" type="text" name="bp" value="{{i.tot_prof}}">
  <!-- total proffit from items and hotlines -->
  <input class="hidden" type="text" name="th">
  <!-- per item override from db -->
  <input class="hidden" type="text" name="or_it" value="{{i.item_prof}}">
  <!-- total proffit from hotlines -->
  <input class="hidden" type="text" name="hl" value="0">
  <!-- organization ID -->
  <input class="hidden" type="text" name="o" value="{{org.organization_ID}}">
  <input class="hidden" type="text" name="owner_n" value="{{i.owner}}">
  <input class="hidden" type="text" name="owner_id" value="{{i.id}}">
  {% endfor %}
  <td><button type="submit" class="btn btn-link btn-xs btn-block">Submit Report</button></td>
</tbody>

$(document).on("keyup", "[name='hln']", function () {
  $this = $(this);
  //var or = 0
  var pro = 0
  //using native dom Element.closest() method
  //https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
  let parent = $(this.closest('.hotlines'));

  //or using jQuery's closest();
  //let parent = $this.closest('.hotlines');

  var value = parseFloat($this.val());

  var or = parseFloat($(this).siblings("input[name='or']").val());
  var bp = parseFloat($(this).siblings("input[name='bp']").val());
  //var other = parseFloat($(this).siblings("input[name='amt']").val());
  pro = (value * or);
  var total = (pro + bp);

  //use find() to find the child element
  parent.find('input[name="hlnt"]').val("$" + pro.toFixed(2));
  parent.find('input[name="total"]').val("$" + total.toFixed(2));
  parent.find('input[name="th"]').val(total);
  parent.find('input[name="hl"]').val(pro);
});

Answer 1

With the guidance from Tyler Roper it was a simple fix having nothing to do with Javascript. I was tired and testing things and tried to quickly convert a page into a table. The terrible HTML was the cause. To fix it I simply changed to:

<form action="/weekly_reports/" method="POST">
                  <table  id="office_weekly" class="table table-hover table-striped">
                      <thead>
                        <th>Office</th>
                        <th>Backpacks</th>
                        <th>Hotlines</th>
                        <th>Total</th>
                      </thead>
                      <tbody>
                        {% for i in t %}
                          <tr class="hotlines">
                            <td><strong>{{i.owner}}</strong><br>{{i.owner_id}}</td>
                            <td>
                              {{i.tot_itm}}<br>
                              Per Piece Profit: {{"${:,.2f}".format(i.item_prof)}}
                            </td>
                            <td>
                              Payable Hotlines <br><input type="text" name="hln" maxlength="4" value=""><br>
                              Per Hotline Profit: {{"${:,.2f}".format(i.hotline_prof)}}<br>
                              <input type="hidden" name="or" value="{{i.hotline_prof}}">
                            </td>
                            <td>
                              Total Backpack Profit: {{"${:,.2f}".format(i.tot_prof)}}
                            </td>
                            <td>Total Hotline Profit: <input type="text" name="hlnt" readonly /></td>
                          </tr>
                        {% endfor %}
                        <td><button type="submit" class="btn btn-link btn-xs btn-block">Submit Report</button></td>
                      </tbody>
                    </table>
                </form>