title: How to select previous input element in child div from span and bind change event?
body: <p>The HTML structure in question looks as follows:</p>
  
  <pre><code>&lt;div class="form-group form-text"&gt;
    &lt;div class="input-group"&gt;
      &lt;span class="input-group-btn"&gt;
        &lt;div id="47" class="btn btn-danger input-xs remove-farming-action"&gt;
          &lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;
        &lt;/div&gt;
      &lt;/span&gt;
      &lt;input id="action_CropCount" 
             class="form-control input-xs numeric-text-box crop-counter-textbox" 
             type="number" 
             value="8" 
             name="action.CropCount" 
             min="1" 
             max="999"&gt;
    &lt;/div&gt;
    Aubergine Violetta lunga 3
    &lt;span class="crop-count-crop-word"&gt;crop(s)&lt;/span&gt;
    &lt;br&gt;
  &lt;/div&gt;
  (... And so on for different items.)
  </code></pre>
  
  <p>So this is a list of form-groups which all have an input field where a value can be selected and a span-field with a text in it. What I want to do is change the "crop-count-crop-word" text when the input field with class "crop-counter-textbox" is 1 (from plural to non-plural). The challenge is that the span element next to the input box must change, not all others.</p>
  
  <p>The solution I chose (if there is a better one let me know) is to use JavaScript to select input field and bind a change event to it as follows:</p>
  
  <pre><code>makeCropPluralWhenCropCountIsBiggerThan1: function() {
      // Every crop count input field needs a span label with crop or crops depending on the count.
      $('.crop-count-crop-word').prev('input').change(function() {
          $(this).next('span').text( $(this).val() == 1 ? 'crop' : 'crops' );
      });
      // Ensure text is correct on load by triggering change event.
      $('.crop-count-crop-word').prev('input').trigger('change');
  }
  </code></pre>
  
  <p>Unfortunately this does not work. I do not manage to select the previous input field from the span element. No item is selected.</p>
  
  <p>Can anyone tell how to select the "crop-count-crop-word" span which is next from the input with class "crop-counter-textbox"?</p>
  
  <p>/Edit here is a Fiddle: <a href="https://jsfiddle.net/4ftx1b2b/1/" rel="nofollow">https://jsfiddle.net/4ftx1b2b/1/</a></p>