I have 2 select with the same clase and different id , when I want to first get the 2 select and pressing the 2 button is not able to take the value, but if I do it with the first select and the first button if you take the value.
How do I make it so that I take the value independently of what comes first?
here is a demo of what I have DEMO
It is not necessary to select both drop-down
to be able to draw. Just add another data attribute for example ref which is related to rel of the button pressed and so know what select and canvas select.
Example
$(document).ready(function() {
$('.draw').click(function() {
var rel = $(this).attr('rel');
var select = document.querySelector('select[ref="' + rel + '"]');
draw(rel, $(select).val());
});
});
function draw(rel, value) {
var canvas = document.querySelector('canvas[ref="' + rel + '"]');
var ctx = canvas.getContext("2d");
if (value === '2') {
// Draw the face
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.arc(95, 85, 40, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.lineWidth = 2;
ctx.stroke();
ctx.fillStyle = "black";
// Draw the left eye
ctx.beginPath();
ctx.arc(75, 75, 5, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
// Draw the right eye
ctx.beginPath();
ctx.arc(114, 75, 5, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
// Draw the mouth
ctx.beginPath();
ctx.arc(95, 90, 26, Math.PI, 2 * Math.PI, true);
ctx.closePath();
ctx.fill();
// Write "Hello, World!"
ctx.font = "30px Garamond";
ctx.fillText("Hello, World!", 15, 175);
}
if (value == '4') {
// Draw the face
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(95, 85, 40, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.lineWidth = 2;
ctx.stroke();
ctx.fillStyle = "black";
// Draw the left eye
ctx.beginPath();
ctx.arc(75, 75, 5, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
// Draw the right eye
ctx.beginPath();
ctx.arc(114, 75, 5, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
// Draw the mouth
ctx.beginPath();
ctx.arc(95, 90, 26, Math.PI, 2 * Math.PI, true);
ctx.closePath();
ctx.fill();
// Write "Hello, World!"
ctx.font = "30px Garamond";
ctx.fillText("Hola, Mundo!", 15, 175);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="todo" ref="1">
<option selected>Ingrese cant</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<div>
<button class="draw" rel="1">Draw</button>
</div>
<div>
<canvas ref="1" width="200" height="200"></canvas>
</div>
<select class="todo" ref="2">
<option selected>Ingrese cant</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<div>
<button class="draw" rel="2">Draw</button>
</div>
<div>
<canvas ref="2" width="200" height="200"></canvas>
</div> What you can do is use :first (Take the first element that is achieved with the class) or :last (Take the last element with the class) as:
var test = $('.todo:first').val();
var testy2 = $('.todo:last').val();
Here is your example updated
Note: Here is useful because you only have 2 if you increase the number of controls it is better to look for another alternative, such as creating unique Ids.
Edit:
Based on your comment, what you can do is include each select with the button in separate div like this:
<div>
<select class="todo" id="ty">
<option selected>Ingrese cant</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<div>
<button class="draw" id="draw" rel="1" data-select='1'>Draw</button>
</div>
<div>
<canvas id="1" width="200" height="200"></canvas>
</div>
</div>
Then via jQuery do this:
var test = $(this).parent().parent().find('select').val();
What it does is, go to the father of the father (This is the div that encompasses each section) look for the select, and give me its value.
Updated code here