title: How to find the content of closest text input in another div
body: <p>I have this HTML:</p>
  
  <pre><code>&lt;div class="panel-body"&gt;
      &lt;div class="form-group row"&gt;
          &lt;label class="col-sm-5 col-form-label"&gt;Date&lt;/label&gt;
          &lt;div class="col-sm-7"&gt;
              &lt;input type="text" class="monthpicker hasDatepicker" id="inputMonth[0]"
                     name="inputMonth[0]" value="30/11/2019" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group row"&gt;
          &lt;label class="col-sm-5 col-form-label"&gt;Expected&lt;/label&gt;
          &lt;div class="col-sm-7"&gt;
              &lt;input type="text" class="form-control" id="inputCity"
                     name="inputCity[]" value="2750" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group row"&gt;
          &lt;label class="col-sm-5 col-form-label"&gt;Costs&lt;/label&gt;
          &lt;div class="col-sm-7"&gt;
              &lt;input type="text" class="form-control" id="inputCosts"
                     name="inputCosts[]" value="0" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to be able to select the nearest <code>#inputCosts</code> text when the <code>#inputCity</code> box changes. I am using this code:</p>
  
  <pre><code>$(document).on('input', '#inputCity', function() {
      var monthcost = $(this).closest('.panel-heading .form-group row')
                             .find("input[name='inputCosts[]']")
                             .val();  
      console.log(monthcost);
  });
  </code></pre>
  
  <p>What is the correct way to find this? </p>