I have a scenario where results returned from a query are populated into a list i.e <li> element the lists represent categories and sub categories from a database table.
The problem is I wanted to use jQuery onclick event to trigger a tick icon on the row which is clicked this tick icon represent the functionality for the user to proceed to the next step.
The issue is i cannot get the onclick event to work correctly on the row which is clicked. Any help would be appreciated below is the jQuery to trigger the event. here is the website link http://staging.expatexchange.ph/post-advert-step1 where the functionality is taking place
<script type="text/javascript">
$(".finish").click(function() {
var span = $(this).closest("li").find("#theimg");
jQuery(span).toggle('show');
var isVisible = $("#theimg" ).is( ":visible" );
var isHidden = $("#theimg" ).is( ":hidden" );
if(!isVisible) {
$('.next_btn2').prop('disabled', false); //TO ENABLE
$(".next_btn2").css("opacity",1);
$(".next_btn2").css("background-color","#87b119");
}
else {
$('.next_btn2').prop('disabled', true); //TO ENABLE
$(".next_btn2").css("opacity",0.5);
$(".next_btn2").css("background-color","#f25c27");
}
}); // end function
</script>
