I can add values to an input and remove but what I want to achieve looks messy.
I have two images that when clicked, gives me their user id. So when clicked, a hidden input value of 1 is added. When the other image is clicked, same:
<input id="selective-avatars" name="avatars[]" type=hidden value="1,2" />
If same image is clicked, again, their id is removed (like a toggleClass
sort of thing). That is the tricky part I face with piecing the two links together.
Full HTML (example):
<img src="url" id="1" class="avatar" />
<img src="url" id="2" class="avatar" />
# Should this be in the loop also? It's currently not.
<input id="selective-avatars" name="avatars[]" type=hidden />
JS:
$('.avatar').click(function(){
let {id} = this;
//let array = $('#selective-avatars').val().split(',');
$('#selective-avatars').val(function(i, val){
return [val + (!val ? '' : ',') + id];
});
//Removed about 8 lines as nothing works
//$(this).toggleClass('avatar-circle-display-loop-select')
});
I was trying not going the react route as I wanted to use pure jquery in the side project.
All I want is <input id="selective-avatars" name="avatars[]" type=hidden value="1,2, etc" />
going to the controller.