title: Get previous and next elements by class name in pure javascript
body: <p>I have html like this.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function update(elem) {
    var value = elem.value;
    var previousChildren = elem.previousElementSibling;
  
    if (previousChildren) {
      previousChildren.value = value - 1;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;input type="text" placeholder="price from" class="from" name='from1' onkeyup="update(this);"&gt;
    &lt;input readonly type="text" placeholder="price to" class="to" name="to1"&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;input type="text" placeholder="price from" class="from" name='from2' onkeyup="update(this);"&gt;
    &lt;input readonly type="text" placeholder="price to" class="to" name='to2' "&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>But unsuccessful in getting previous element sibling.</p>
  <p>So I need to update <code>price to</code> based upon <code>price from</code> of the next <code>div</code>. i need to fix the range. Problem i am getting is how to get the previous first element with class <code>to</code>. Like if i filled element with name <code>from2</code> i have to fill <code>to1</code> automatically and this goes on with many fields as per the user requirements. I have done this previously in jquery but want to do this in pure javascript and not able to find any good answer.</p>