Title: How to hide an element based on a number of other elements
Tags: javascript;jquery
Question: So I am currently trying to hide buttons based on a 'true' or 'false' element in html. But I have a total of 5 css blocks showing. Each have those buttons. It only hides the buttons on the first block. I have 5 total blocks.
if ($.attr("data-ischar") === "true") {
$("#join").css({"display":"block"});
$("#delete").css({"display":"block"});
$("#create").css({"display":"none"});
} else {
$("#join").css({"display":"none"});
$("#delete").css({"display":"none"});
$("#create").css({"display":"block"});
};
is my code,
data-ischar is the true or false value.
I have an id called data-charid  that = all the way to 5. only the first one hides the buttons.
Any suggestions? sorry If this is unclear, new to js.
Comment: `$.attr("data-ischar")` ???? that makes little sense in jQuery Where is the selector

Comment: You are using id selectors. ids have to be unique. So it's normal that only the first block works. Use class names instead to be able to style multiple blocks with the same code so you only have to toggle class names instead of setting the css inline. Also, a css rule like `*[data-ischar="true"]` might be more useful.

Comment: As Krishna says you have to select an element befor access to attribute $( elem ).attr( "checked" ) , remeber that if your accessor is not unique it will return an array and you have to itereta on it. take a look documentation http://api.jquery.com/attr/
if you ha 5 id   for(i=0 ; i<5 ; i++){...
$("data-charid"+i).each(function( index ) {
if ($( this ).attr("data-ischar") === "true") {
... your actions

Comment: Show html structure and explain with more detail and code

Comment: Please use a class attribute instead of id as id should be unique in a document. You can use a dot selector $(".className").css({"display":"none"});


Here is another answer: You need to select the element that has that data-ischar element on it, and then get the attribute from it.  Right now you are asking jquery itself to get an html attribute, but not from johnstonpeter@example.com.
<div id="my-element" data-ischar="true"&gt;</div&gt;
if ($("#my-element").attr("data-ischar") === "true") {
$("#join").css("display", "block");
$("#delete").css("display", "block");
$("#create").css("display", "none");
} else {
$("#join").css("display", "none");
$("#delete").css("display", "none");
$("#create").css("display", "block");
However, we can simplify that code a bit!  jQuery has .hide() which is a shortcut for setting .css('display', 'none') and .show() which is a shortcut for .css('display', 'block')
You can also select more than one element at a time, which is useful in a situation like this where you want to do the same thing to several elements.
if ($("#my-element").attr("data-ischar") === "true") {
$("#join, #delete").show()
$("#create").hide();
} else {
$("#join, #delete").hide()
$("#create").show();
Or, even better you can use .toggle() and pass in a boolean to show/hide the element.
var isChar = $("#my-element").attr("data-ischar") === "true";
$("#join, #delete").toggle(isChar)
$("#create").toggle(!isChar);
And finally, as @Deepak pointed out, it's probably a better idea to hide/show an element by adding/removing a CSS class.  There is .toggleClass() for this!
.hidden { display: none; }
var isChar = $("#my-element").attr("data-ischar") === "true";
$("#join, #delete").toggleClass('hidden', isChar)
$("#create").toggleClass('hidden', !isChar);
Comment for this answer: better to use css and add,removeclass

Here is another answer: Appearances should be styled by css, status management is done by js.
p = document.querySelector("p")
cts = document.querySelector(".controls")
ctr = document.querySelector("#controller")
ctr.addEventListener('click', e =&gt; {
status = p.dataset.ischar === 'true' ? 'false' : 'true'
// JS control the data attribute
p.dataset.ischar = status
p.innerText = `Char status: ${status}`
// we toggle the class based on attribute change event.
cts.classList.toggle('hide')
#controls button {
display: block;
.controls.hide button {
display: none;
<div&gt;
<button id="controller"&gt;Control the char status</button&gt;
<div&gt;
<p data-ischar="true"&gt;Char status: true</p&gt;
<div class="controls" class="hide"&gt;
<button&gt;first Join</button&gt;
<button&gt;Create</button&gt;
<button&gt;Delete</button&gt;
</div&gt;
<div class="controls" class="hide"&gt;
<button&gt;Second Join</button&gt;
<button&gt;Create</button&gt;
<button&gt;Delete</button&gt;
</div&gt;
<div class="controls" class="hide"&gt;
<button&gt;third Join</button&gt;
<button&gt;Create</button&gt;
<button&gt;Delete</button&gt;
</div&gt;
<div class="controls" class="hide"&gt;
<button&gt;Join</button&gt;
<button&gt;Create</button&gt;
<button&gt;Delete</button&gt;
</div&gt;
<div class="controls" class="hide"&gt;
<button&gt;Join</button&gt;
<button&gt;Create</button&gt;
<button&gt;Delete</button&gt;
</div&gt;
<div class="controls" class="hide"&gt;
<button&gt;Join</button&gt;
<button&gt;Create</button&gt;
<button&gt;Delete</button&gt;
</div&gt;
<div class="controls" class="hide"&gt;
<button&gt;Join</button&gt;
<button&gt;Create</button&gt;
<button&gt;Delete</button&gt;
</div&gt;
<div class="controls" class="hide"&gt;
<button&gt;Join</button&gt;
<button&gt;Create</button&gt;
<button&gt;Delete</button&gt;
</div&gt;
<div class="controls" class="hide"&gt;
<button&gt;Join</button&gt;
<button&gt;Create</button&gt;
<button&gt;Delete</button&gt;
</div&gt;

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 5, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2019:00:04/09/19', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><jquery>', 'Title': 'How to hide an element based on a number of other elements', 'ViewCount': 668, 'id': 55592860, 'user_AboutMe': None, 'user_AccountId': 15486492.0, 'user_DisplayName': 'Arian Coipel', 'user_Reputation': 23.0, 'user_Views': 8.0, 'user_id': 11172372.0}}