plus-minus button with input

.html

<div class="plus-minus-element">
  <button class="dec plus-minus-element__button">-</button>
  <input type="text" name="" value="2">
  <button class="inc plus-minus-element__button">+</button>
</div>

.js

//plus-minus-element
  $(".plus-minus-element__button").on("click", function() {

    var $button = $(this);
    var oldValue = $button.parent().find("input").val();

    if ($button.text() == "+") {
      var newVal = parseFloat(oldValue) + 1;
    } else {
     // Don't allow decrementing below zero
      if (oldValue > 0) {
        var newVal = parseFloat(oldValue) - 1;
      } else {
        newVal = 0;
      }
    }

    $button.parent().find("input").val(newVal);

  });

.scss

//plus-minus-element
  .plus-minus-element {
    text-align: center;
    white-space: nowrap;
    input {
      font-family: MuseoSans-500;
      font-size: 16px;
      line-height: 1.6;
      color: #2e3b4e;
      width: 20px;
      display: inline-block;
      vertical-align: middle;
      text-align: center;
    }
  }

  .plus-minus-element__button {
    width: 12px;
    height: 12px;
    display: inline-block;
    vertical-align: middle;
    font-size: 0;
    border: none;
    outline: none;
    cursor: pointer;
    &.dec {
      background: url("data:image/svg+xml;utf8,<svg width='12px' height='12px' viewBox='65 119 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(65.000000, 119.000000)'><circle id='Oval-58' fill='#B0BAC9' cx='6' cy='6' r='6'></circle><path d='M4.5,6 L7.83838868,6' id='Line' stroke='#FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'></path></g></svg>") 0 0 no-repeat;
    }
    &.inc {
      background: url("data:image/svg+xml;utf8,<svg width='13px' height='12px' viewBox='97 119 13 12' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><g id='1-copy-2' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' transform='translate(97.360120, 119.000000)'><circle id='Oval-58' fill='#B0BAC9' cx='6' cy='6' r='6'></circle><g id='Group' transform='translate(3.000000, 3.000000)' stroke='#FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M0.990656621,2.95354205 L4.99065662,2.95354205' id='Line'></path><path d='M2.99065662,0.953542051 L2.99065662,4.95354205' id='Line'></path></g></g></svg>") 0 0 no-repeat;
    }
  }