Alright so I've been working on this system that should return the value of the name attribute inside the tag but no matter what button I click I still get the name of the first one...
$(document).ready(function() {
$(".vehicles-sub").click(function() {
$('.popup_content').show();
$('.black_overlay').show();
var name = $("button").attr("name");
alert(name);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vehicles_case_form">
<div class='vehicle_top_form'>
<h1>Vehicle Four</h1>
<hr/>
</div>
<div class='vehicles_bottom_form'>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever...</p>
</div>
<div class='vehicles_button_form'>
<button class="vehicles-sub" type="submit" name="submit_vehicles_first"> <!-- first name -->
<i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i> PURCHASE
</button>
</div>
</div>
<div class="vehicles_case_form">
<div class='vehicle_top_form'>
<h1>Vehicle Five</h1>
<hr/>
</div>
<div class='vehicles_bottom_form'>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever...</p>
</div>
<div class='vehicles_button_form'>
<button class="vehicles-sub" type="submit" name="submit_vehicles_second"> <!-- second name -->
<i class="fa fa-shopping-cart fa-lg" aria-hidden="true"></i> PURCHASE
</button>
</div>
</div>Now the problem is, whenever I click the button it will always alert submit_vehicles_first.
