Get and set value on another div

Question

I am working in ASP.Net MVC4. My div elements contents are generated in a loop as below:

@foreach (var product in Model.Products)
{
    <div class="col-md-2 vcenter">
        <span class="product-price">Preço: @Model.Price.ToString("C")</span>
    </div>

    @if (Model.IsValid != null && Model.IsValid != "")
    {
        <div class="col-md-2" style="text-align: end;">
            <span>Enter number.</span>
        </div>

        <div class="col-md-2 vcenter" style="text-align: end;">
            @Html.TextBoxFor(m => m.CouponTemp, new { 
                @class = "product-discount-coupon", 
                chart_price = Model.Price.ToString(), 
                dicsount_price = Model.SpecialPrice.ToString(), 
                product_coupon = Model.Coupon, 
                style = "width:50px;" 
            })
            <button type="button" class="apply-discount">Recalculate</button>   
        </div>
    }
}

JavaScript portion

$(".apply-discount").on("click", function () {
    var applyCoupon = $(this).parent().find(".product-discount-coupon").val();
    var price = $(this).parent().find(".product-price").val();
    var cost = 0;
    if (applyCoupon === NaN) {
        applyCoupon = 0;
    }

    if (price === NaN) {
        price = 0;
    }
    $(this).parent().find(".product-price").val(applyCoupon);
});

Browser generated html is below

<div>
    <div class="col-md-1">
        <img src="/Astrology/Product/GetImage/51da66b7-3cb9-418b-ae9a-bc9fe8073b26" style="width: 50px; height: 50px;" alt="Mapa Natal C&#225;rmico" />
    </div>
    <div class="col-md-6 vcenter">
        <span style="font-size: large">Mapa Natal C&#225;rmico. Escrito por Marcelo Dalla</span>
    </div>

    <div class="col-md-2 vcenter">
        <span class="product-price">Preço: R$ 44,00</span>
    </div>

    <div class="col-md-2 vcenter" style="text-align: end;">
        <button type="button" class="dec-count">-</button>

        <input chart-price="44,0000" class="product-count" data-val="true" data-val-number="The field Quantity must be a number." data-val-required="The Quantity field is required." dicsount-price="10,0000" id="products_7819060a-0f29-4637-83de-9262beb1a13f__Quantity" name="products[7819060a-0f29-4637-83de-9262beb1a13f].Quantity" product-coupon="10" readonly="readonly" style="width:50px;" type="text" value="1" />
        <button type="button" class="inc-count">+</button>
    </div>

        <span>If you have a discount coupon for the purchase please enter it here and press the recalculate button.</span>
        <div class="col-md-2 vcenter" style="text-align: end;">

            <input chart-price="44,0000" class="product-discount-coupon" dicsount-price="10,0000" id="products_7819060a-0f29-4637-83de-9262beb1a13f__CouponTemp" name="products[7819060a-0f29-4637-83de-9262beb1a13f].CouponTemp" product-coupon="10" style="width:50px;" type="text" value="" />
            <button type="button" class="apply-discount">Recalculate</button>

            <input id="apply-product-coupon" type="hidden" name="apply-product-coupon">
        </div>

    <div class="col-md-1 vcenter">
        <a href="/Astrology/Shop/DeleteFromCard?productId=41f7e40b-62ad-4202-964a-cbed7381b06c">
            <i class="fa fa-remove"></i>
        </a>
    </div>
</div>

When the user clicks on the Recalculate button I want to put CouponTemp textbox value in another span. Note that clicking on block-1 does not impact on block-2 or rest, in the same way click on block-2 not impact on another block content.

<span>Preço: @Model.Price.ToString("C")</span>

Answer 1

Following code snippet may help you.

$(".apply-discount").on("click", function () {
    var applyCoupon = $(this).parent().find(".product-discount-coupon");
    var price = applyCoupon.val();

    //to get others info
    var chart_price= applyCoupon.attr('chart_price');
    var dicsount_price= applyCoupon.attr('dicsount_price');
    var product_coupon= applyCoupon.attr('product_coupon');

    $(this).parent().prev().prev().find(".product-price").html('Preço: '+price*1);
});

N.B: price*1 will convert it to a number.

Answer 2

Here is your script:

$(document).ready(function(){
   $("button.apply-discount").click(function(){
      //get your input value
      var discount = $(this).prev('input.product-discount-coupon').first().val();
      //Get your span
      var resultSpan = $(this).parent().prev().prev().prev().find('span');
      //Update your span with input value
      resultSpan.html("Preço: R$ " + discount);
   });      
});

I create JSFiddle to show how it works.

Answer 3

Well, pretty easy if you just assign ids to the elements. Use something like id from your product to ensure they are unique and match.

@foreach (var product in Model.Products)
{
    <div class="col-md-2 vcenter">
        <span>Preço: @Model.Price.ToString("C")</span>
    </div>

    @if (Model.IsValid != null && Model.IsValid != "")
    {
        <div class="col-md-2" style="text-align: end;">
            <span id="@product.Id">Enter number.</span>
        </div>

        <div class="col-md-2 vcenter" style="text-align: end;">
            @Html.TextBoxFor(m => m.CouponTemp, new { 
                @class = "product-discount-coupon", 
                chart_price = Model.Price.ToString(), 
                dicsount_price = Model.SpecialPrice.ToString(), 
                product_coupon = Model.Coupon, 
                style = "width:50px;",
                id = "txt_" + @product.Id 
            })
            <button type="button" class="apply-discount" onclick="adjustPrice(@product.Id);">Recalculate</button>   
        </div>
    }
}

Then have a function that handles it:

<script type="text/javascript">
    var adjustPrice = function (id) {
          var txt = $('#txt_' + id).val();

          $('#' + id).val(txt);
    };
</script>