Changing Value from only one specific value

I have a group of generated inputs with the task of adding items to a shop list and adding the value to a sessionStorage Key:

enter image description here

$('.increment').click(function increment() {

  $('.quantity-input').val(function(i, oldval) {

    return parseInt(oldval, 10) + 1;

  });

});





$('.drecement').click(function increment() {

  $('.quantity-input').val(function(i, oldval) {

    return parseInt(oldval, 10) - 1;

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="counter-container">

  <input class="quantity-input" id=" 

       <?php echo $id_produtos; ?>" type="text" value="1">

  <div class="btn-container">

    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 

        increment">▲</button>

    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 

        drecement">▼</button>

  </div>

</div>



<div class="counter-container">

  <input class="quantity-input" id=" 

       <?php echo $id_produtos; ?>" type="text" value="1">

  <div class="btn-container">

    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 

        increment">▲</button>

    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 

        drecement">▼</button>

  </div>

</div>

The problem is that I'm changing also the others generated inputs:

enter image description here

How can I ONLY change the input that I'm clicking?

edited Nov 16 '18 at 12:10

Zakaria Acharki

55.3k134368

asked Nov 16 '18 at 12:05

cristian Oliveira

215

add a comment |

I have a group of generated inputs with the task of adding items to a shop list and adding the value to a sessionStorage Key:

enter image description here

$('.increment').click(function increment() {

  $('.quantity-input').val(function(i, oldval) {

    return parseInt(oldval, 10) + 1;

  });

});





$('.drecement').click(function increment() {

  $('.quantity-input').val(function(i, oldval) {

    return parseInt(oldval, 10) - 1;

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="counter-container">

  <input class="quantity-input" id=" 

       <?php echo $id_produtos; ?>" type="text" value="1">

  <div class="btn-container">

    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 

        increment">▲</button>

    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 

        drecement">▼</button>

  </div>

</div>



<div class="counter-container">

  <input class="quantity-input" id=" 

       <?php echo $id_produtos; ?>" type="text" value="1">

  <div class="btn-container">

    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 

        increment">▲</button>

    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 

        drecement">▼</button>

  </div>

</div>

The problem is that I'm changing also the others generated inputs:

enter image description here

How can I ONLY change the input that I'm clicking?

edited Nov 16 '18 at 12:10

Zakaria Acharki

55.3k134368

asked Nov 16 '18 at 12:05

cristian Oliveira

215

add a comment |

I have a group of generated inputs with the task of adding items to a shop list and adding the value to a sessionStorage Key:

enter image description here

$('.increment').click(function increment() {

  $('.quantity-input').val(function(i, oldval) {

    return parseInt(oldval, 10) + 1;

  });

});





$('.drecement').click(function increment() {

  $('.quantity-input').val(function(i, oldval) {

    return parseInt(oldval, 10) - 1;

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="counter-container">

  <input class="quantity-input" id=" 

       <?php echo $id_produtos; ?>" type="text" value="1">

  <div class="btn-container">

    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 

        increment">▲</button>

    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 

        drecement">▼</button>

  </div>

</div>



<div class="counter-container">

  <input class="quantity-input" id=" 

       <?php echo $id_produtos; ?>" type="text" value="1">

  <div class="btn-container">

    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 

        increment">▲</button>

    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 

        drecement">▼</button>

  </div>

</div>

The problem is that I'm changing also the others generated inputs:

enter image description here

How can I ONLY change the input that I'm clicking?

edited Nov 16 '18 at 12:10

Zakaria Acharki

55.3k134368

asked Nov 16 '18 at 12:05

cristian Oliveira

215

I have a group of generated inputs with the task of adding items to a shop list and adding the value to a sessionStorage Key:

enter image description here

$('.increment').click(function increment() {

  $('.quantity-input').val(function(i, oldval) {

    return parseInt(oldval, 10) + 1;

  });

});





$('.drecement').click(function increment() {

  $('.quantity-input').val(function(i, oldval) {

    return parseInt(oldval, 10) - 1;

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="counter-container">

  <input class="quantity-input" id=" 

       <?php echo $id_produtos; ?>" type="text" value="1">

  <div class="btn-container">

    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 

        increment">▲</button>

    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 

        drecement">▼</button>

  </div>

</div>



<div class="counter-container">

  <input class="quantity-input" id=" 

       <?php echo $id_produtos; ?>" type="text" value="1">

  <div class="btn-container">

    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 

        increment">▲</button>

    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 

        drecement">▼</button>

  </div>

</div>

The problem is that I'm changing also the others generated inputs:

enter image description here

How can I ONLY change the input that I'm clicking?

$('.increment').click(function increment() {

  $('.quantity-input').val(function(i, oldval) {

    return parseInt(oldval, 10) + 1;

  });

});





$('.drecement').click(function increment() {

  $('.quantity-input').val(function(i, oldval) {

    return parseInt(oldval, 10) - 1;

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="counter-container">

  <input class="quantity-input" id=" 

       <?php echo $id_produtos; ?>" type="text" value="1">

  <div class="btn-container">

    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 

        increment">▲</button>

    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 

        drecement">▼</button>

  </div>

</div>



<div class="counter-container">

  <input class="quantity-input" id=" 

       <?php echo $id_produtos; ?>" type="text" value="1">

  <div class="btn-container">

    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 

        increment">▲</button>

    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 

        drecement">▼</button>

  </div>

</div>

$('.increment').click(function increment() {

  $('.quantity-input').val(function(i, oldval) {

    return parseInt(oldval, 10) + 1;

  });

});





$('.drecement').click(function increment() {

  $('.quantity-input').val(function(i, oldval) {

    return parseInt(oldval, 10) - 1;

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="counter-container">

  <input class="quantity-input" id=" 

       <?php echo $id_produtos; ?>" type="text" value="1">

  <div class="btn-container">

    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 

        increment">▲</button>

    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 

        drecement">▼</button>

  </div>

</div>



<div class="counter-container">

  <input class="quantity-input" id=" 

       <?php echo $id_produtos; ?>" type="text" value="1">

  <div class="btn-container">

    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 

        increment">▲</button>

    <button id="<?php echo $id_produtos; ?>" class="btn-arrow 

        drecement">▼</button>

  </div>

</div>

javascript jquery html input

edited Nov 16 '18 at 12:10

Zakaria Acharki

55.3k134368

asked Nov 16 '18 at 12:05

cristian Oliveira

215

edited Nov 16 '18 at 12:10

Zakaria Acharki

55.3k134368

asked Nov 16 '18 at 12:05

cristian Oliveira

215

edited Nov 16 '18 at 12:10

Zakaria Acharki

55.3k134368

edited Nov 16 '18 at 12:10

Zakaria Acharki

55.3k134368

edited Nov 16 '18 at 12:10

Zakaria Acharki

55.3k134368

asked Nov 16 '18 at 12:05

cristian Oliveira

215

asked Nov 16 '18 at 12:05

cristian Oliveira

215

asked Nov 16 '18 at 12:05

cristian Oliveira

215

add a comment |

1 Answer
1

active

oldest

votes

You need to use $(this) to refer to the related input by going up to the parent div using .closest('.counter-container') then select the desired input using .find('.quantity-input') like :

$(this).closest('.counter-container').find('.quantity-input').val(...

$('.increment').click(function increment() {

  $(this).closest('.counter-container').find('.quantity-input').val(function(i, oldval) {

    return parseInt(oldval, 10) + 1;

  });

});





$('.drecement').click(function increment() {

  $(this).closest('.counter-container').find('.quantity-input').val(function(i, oldval) {

    return parseInt(oldval, 10) - 1;

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="counter-container">

  <input class="quantity-input" id="x_1" type="text" value="1">

  <div class="btn-container">

    <button id="1" class="btn-arrow increment">▲</button>

    <button id="1" class="btn-arrow drecement">▼</button>

  </div>

</div>



<div class="counter-container">

  <input class="quantity-input" id="x_2" type="text" value="1">

  <div class="btn-container">

    <button id="y_2" class="btn-arrow increment">▲</button>

    <button id="z_2" class="btn-arrow drecement">▼</button>

  </div>

</div>



<div class="counter-container">

  <input class="quantity-input" id="x_3" type="text" value="1">

  <div class="btn-container">

    <button id="y_3" class="btn-arrow increment">▲</button>

    <button id="z_3" class="btn-arrow drecement">▼</button>

  </div>

</div>

answered Nov 16 '18 at 12:07

Zakaria Acharki

55.3k134368

Oh, thank you mate, that worked like a charm!

– cristian Oliveira
Nov 16 '18 at 12:14

You're welcome brother, glad I could help.

– Zakaria Acharki
Nov 16 '18 at 12:15

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53337578%2fchanging-value-from-only-one-specific-value%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

You need to use $(this) to refer to the related input by going up to the parent div using .closest('.counter-container') then select the desired input using .find('.quantity-input') like :

$(this).closest('.counter-container').find('.quantity-input').val(...

$('.increment').click(function increment() {

  $(this).closest('.counter-container').find('.quantity-input').val(function(i, oldval) {

    return parseInt(oldval, 10) + 1;

  });

});





$('.drecement').click(function increment() {

  $(this).closest('.counter-container').find('.quantity-input').val(function(i, oldval) {

    return parseInt(oldval, 10) - 1;

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="counter-container">

  <input class="quantity-input" id="x_1" type="text" value="1">

  <div class="btn-container">

    <button id="1" class="btn-arrow increment">▲</button>

    <button id="1" class="btn-arrow drecement">▼</button>

  </div>

</div>



<div class="counter-container">

  <input class="quantity-input" id="x_2" type="text" value="1">

  <div class="btn-container">

    <button id="y_2" class="btn-arrow increment">▲</button>

    <button id="z_2" class="btn-arrow drecement">▼</button>

  </div>

</div>



<div class="counter-container">

  <input class="quantity-input" id="x_3" type="text" value="1">

  <div class="btn-container">

    <button id="y_3" class="btn-arrow increment">▲</button>

    <button id="z_3" class="btn-arrow drecement">▼</button>

  </div>

</div>

answered Nov 16 '18 at 12:07

Zakaria Acharki

55.3k134368

Oh, thank you mate, that worked like a charm!

– cristian Oliveira
Nov 16 '18 at 12:14

You're welcome brother, glad I could help.

– Zakaria Acharki
Nov 16 '18 at 12:15

add a comment |

You need to use $(this) to refer to the related input by going up to the parent div using .closest('.counter-container') then select the desired input using .find('.quantity-input') like :

$(this).closest('.counter-container').find('.quantity-input').val(...

$('.increment').click(function increment() {

  $(this).closest('.counter-container').find('.quantity-input').val(function(i, oldval) {

    return parseInt(oldval, 10) + 1;

  });

});





$('.drecement').click(function increment() {

  $(this).closest('.counter-container').find('.quantity-input').val(function(i, oldval) {

    return parseInt(oldval, 10) - 1;

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="counter-container">

  <input class="quantity-input" id="x_1" type="text" value="1">

  <div class="btn-container">

    <button id="1" class="btn-arrow increment">▲</button>

    <button id="1" class="btn-arrow drecement">▼</button>

  </div>

</div>



<div class="counter-container">

  <input class="quantity-input" id="x_2" type="text" value="1">

  <div class="btn-container">

    <button id="y_2" class="btn-arrow increment">▲</button>

    <button id="z_2" class="btn-arrow drecement">▼</button>

  </div>

</div>



<div class="counter-container">

  <input class="quantity-input" id="x_3" type="text" value="1">

  <div class="btn-container">

    <button id="y_3" class="btn-arrow increment">▲</button>

    <button id="z_3" class="btn-arrow drecement">▼</button>

  </div>

</div>

answered Nov 16 '18 at 12:07

Zakaria Acharki

55.3k134368

Oh, thank you mate, that worked like a charm!

– cristian Oliveira
Nov 16 '18 at 12:14

You're welcome brother, glad I could help.

– Zakaria Acharki
Nov 16 '18 at 12:15

add a comment |

You need to use $(this) to refer to the related input by going up to the parent div using .closest('.counter-container') then select the desired input using .find('.quantity-input') like :

$(this).closest('.counter-container').find('.quantity-input').val(...

$('.increment').click(function increment() {

  $(this).closest('.counter-container').find('.quantity-input').val(function(i, oldval) {

    return parseInt(oldval, 10) + 1;

  });

});





$('.drecement').click(function increment() {

  $(this).closest('.counter-container').find('.quantity-input').val(function(i, oldval) {

    return parseInt(oldval, 10) - 1;

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="counter-container">

  <input class="quantity-input" id="x_1" type="text" value="1">

  <div class="btn-container">

    <button id="1" class="btn-arrow increment">▲</button>

    <button id="1" class="btn-arrow drecement">▼</button>

  </div>

</div>



<div class="counter-container">

  <input class="quantity-input" id="x_2" type="text" value="1">

  <div class="btn-container">

    <button id="y_2" class="btn-arrow increment">▲</button>

    <button id="z_2" class="btn-arrow drecement">▼</button>

  </div>

</div>



<div class="counter-container">

  <input class="quantity-input" id="x_3" type="text" value="1">

  <div class="btn-container">

    <button id="y_3" class="btn-arrow increment">▲</button>

    <button id="z_3" class="btn-arrow drecement">▼</button>

  </div>

</div>

answered Nov 16 '18 at 12:07

Zakaria Acharki

55.3k134368

You need to use $(this) to refer to the related input by going up to the parent div using .closest('.counter-container') then select the desired input using .find('.quantity-input') like :

$(this).closest('.counter-container').find('.quantity-input').val(...

$('.increment').click(function increment() {

  $(this).closest('.counter-container').find('.quantity-input').val(function(i, oldval) {

    return parseInt(oldval, 10) + 1;

  });

});





$('.drecement').click(function increment() {

  $(this).closest('.counter-container').find('.quantity-input').val(function(i, oldval) {

    return parseInt(oldval, 10) - 1;

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="counter-container">

  <input class="quantity-input" id="x_1" type="text" value="1">

  <div class="btn-container">

    <button id="1" class="btn-arrow increment">▲</button>

    <button id="1" class="btn-arrow drecement">▼</button>

  </div>

</div>



<div class="counter-container">

  <input class="quantity-input" id="x_2" type="text" value="1">

  <div class="btn-container">

    <button id="y_2" class="btn-arrow increment">▲</button>

    <button id="z_2" class="btn-arrow drecement">▼</button>

  </div>

</div>



<div class="counter-container">

  <input class="quantity-input" id="x_3" type="text" value="1">

  <div class="btn-container">

    <button id="y_3" class="btn-arrow increment">▲</button>

    <button id="z_3" class="btn-arrow drecement">▼</button>

  </div>

</div>

$('.increment').click(function increment() {

  $(this).closest('.counter-container').find('.quantity-input').val(function(i, oldval) {

    return parseInt(oldval, 10) + 1;

  });

});





$('.drecement').click(function increment() {

  $(this).closest('.counter-container').find('.quantity-input').val(function(i, oldval) {

    return parseInt(oldval, 10) - 1;

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="counter-container">

  <input class="quantity-input" id="x_1" type="text" value="1">

  <div class="btn-container">

    <button id="1" class="btn-arrow increment">▲</button>

    <button id="1" class="btn-arrow drecement">▼</button>

  </div>

</div>



<div class="counter-container">

  <input class="quantity-input" id="x_2" type="text" value="1">

  <div class="btn-container">

    <button id="y_2" class="btn-arrow increment">▲</button>

    <button id="z_2" class="btn-arrow drecement">▼</button>

  </div>

</div>



<div class="counter-container">

  <input class="quantity-input" id="x_3" type="text" value="1">

  <div class="btn-container">

    <button id="y_3" class="btn-arrow increment">▲</button>

    <button id="z_3" class="btn-arrow drecement">▼</button>

  </div>

</div>

$('.increment').click(function increment() {

  $(this).closest('.counter-container').find('.quantity-input').val(function(i, oldval) {

    return parseInt(oldval, 10) + 1;

  });

});





$('.drecement').click(function increment() {

  $(this).closest('.counter-container').find('.quantity-input').val(function(i, oldval) {

    return parseInt(oldval, 10) - 1;

  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="counter-container">

  <input class="quantity-input" id="x_1" type="text" value="1">

  <div class="btn-container">

    <button id="1" class="btn-arrow increment">▲</button>

    <button id="1" class="btn-arrow drecement">▼</button>

  </div>

</div>



<div class="counter-container">

  <input class="quantity-input" id="x_2" type="text" value="1">

  <div class="btn-container">

    <button id="y_2" class="btn-arrow increment">▲</button>

    <button id="z_2" class="btn-arrow drecement">▼</button>

  </div>

</div>



<div class="counter-container">

  <input class="quantity-input" id="x_3" type="text" value="1">

  <div class="btn-container">

    <button id="y_3" class="btn-arrow increment">▲</button>

    <button id="z_3" class="btn-arrow drecement">▼</button>

  </div>

</div>

answered Nov 16 '18 at 12:07

Zakaria Acharki

55.3k134368

answered Nov 16 '18 at 12:07

Zakaria Acharki

55.3k134368

answered Nov 16 '18 at 12:07

Zakaria Acharki

55.3k134368

answered Nov 16 '18 at 12:07

Zakaria Acharki

55.3k134368

Oh, thank you mate, that worked like a charm!

– cristian Oliveira
Nov 16 '18 at 12:14

You're welcome brother, glad I could help.

– Zakaria Acharki
Nov 16 '18 at 12:15

add a comment |

Oh, thank you mate, that worked like a charm!

– cristian Oliveira
Nov 16 '18 at 12:14

You're welcome brother, glad I could help.

– Zakaria Acharki
Nov 16 '18 at 12:15

Oh, thank you mate, that worked like a charm!

– cristian Oliveira
Nov 16 '18 at 12:14

You're welcome brother, glad I could help.

– Zakaria Acharki
Nov 16 '18 at 12:15

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk