Получите <div>за пределами этого <div>

Question

Я хотел бы получить второй div (total-price) вместо первого div.

Кроме того, я хотел бы добавить знак $ в div, но когда он пытается преобразовать данныев Int, очевидно, "$" вызовет ошибку. У меня есть обходной метод для этого, но есть ли способ объединить $?

Большое спасибо.

            <!-- Product #1 -->
            <div class="item">
                <div class="quantity">
                    <button class="plus-btn" type="button" name="button">
                    </button>   
                    <div class="total-price">22</div> <!--I dont want this one -->
                </div>
                <div class="total-price">22</div> <!--I want to access this div -->
            </div>

JQuery

                $('.plus-btn').on('click', function(e) {
                    e.preventDefault();
                    //Increase cost
                    var $this = $(this);
                    var $cost = $this.closest('div').find('div');
                    var costValue = parseInt($cost.html());

                    costValue += costValue;

                    $cost.html(costValue);
                });

Answer 1

$('.plus-btn').on('click', function(e) {
 e.preventDefault();
 var $this = $(this);
 var $cost = $this.closest('.quantity').siblings('.total-price');
 var costValue = parseInt($cost.html());

 costValue += costValue;

  $cost.html(costValue);
 });

Answer 2

closest('div') для кнопки - это div, который вам не нужен.

Вы можете просто пройти один уровень вверх по дереву DOM и к родителю div и найти '.total_price' в его родном брате.

$('.plus-btn').on('click', function(e) {
 e.preventDefault();
 var $this = $(this);
 var $cost = $this.parent().siblings('.total-price');
 var costValue = parseInt($cost.html());

 costValue += costValue;

  $cost.html(costValue);
 });