Want to toggle 2 different list on click of two different button with same java script code

Question

Issues
There are following issues which are as follows :

• First list is working fine but it has problem that bullets disappears on clcik of button - I know it can be solved by using .Card1.short>li:nth-child(n + 6){display: block;} only but I need to hide lists tag by default
• Second issue is that second button is not working on its own list but changing first one - I need to used same single JS as there can be more than 10 lists . Also the innerHTML of both buttons works fine as changes individually on click

Code

function reed(saad) {
  var ul = document.getElementById("Card1");
  button = document.getElementById("demo1");
  ul.classList.toggle("short");
  if (saad.innerHTML == "Show More") {
    saad.innerHTML = "Show Less";
  } else {
    saad.innerHTML = "Show More";
  }
}

.Card1.short > li:nth-child(n + 6) {
  display: block;
}
.Card1 > li:nth-child(n + 6) {
  display: none;
}
ul{float:left;}

<ul class="Card1" id="Card1">
  <li>Windows 10</li>
  <li>8GB Ram</li>
  <li>1TB SSD</li>
  <li>Intel Core i7 (11th Gen)</li>
  <li>NVIDIA GeForce</li>
  <li>Full HD Display</li>
  <li>Dolby Audio</li>
  <li>1 Warranty</li>
  <button id="demo1" onclick="reed(this)">Show More</button>
</ul>


<ul class="Card2" id="Card2">
  <li>Windows 20</li>
  <li>16GB Ram</li>
  <li>10TB SSD</li>
  <li>Intel Core i15 (21th Gen)</li>
  <li>NVIDIA</li>
  <li>Double HD Display</li>
  <li>Dolby Audio</li>
  <li>2 Warranty</li>
  <button id="demo2" onclick="reed(this)">Show More</button>
</ul>

Answer 1

You can try the following, which points to the parent element of the button, rather than using a fixed id. Also in the css, "list-item" rather than "block" will keep the bullets.

function reed(saad) {
    saad.parentElement.classList.toggle("short");
    if (saad.innerHTML == "Show More") {
        saad.innerHTML = "Show Less";
    } else {
        saad.innerHTML = "Show More";
    }
}

<ul class="Card" id="Card1">
    <li>Windows 10</li>
    <li>8GB Ram</li>
    <li>1TB SSD</li>
    <li>Intel Core i7 (11th Gen)</li>
    <li>NVIDIA GeForce</li>
    <li>Full HD Display</li>
    <li>Dolby Audio</li>
    <li>1 Warranty</li>
    <button id="demo1" onclick="reed(this)">Show More</button>
</ul>


<ul class="Card" id="Card2">
    <li>Windows 20</li>
    <li>16GB Ram</li>
    <li>10TB SSD</li>
    <li>Intel Core i15 (21th Gen)</li>
    <li>NVIDIA</li>
    <li>Double HD Display</li>
    <li>Dolby Audio</li>
    <li>2 Warranty</li>
    <button id="demo2" onclick="reed(this)">Show More</button>
</ul>

.Card.short > li:nth-child(n + 6) {
    display: list-item;
}
.Card > li:nth-child(n + 6) {
    display: none;
}
ul{float:left;}

Check this fiddle if you want to generate the cards using javascript: https://jsfiddle.net/anixiapetha/o7fyjcnL/2/

Answer 2

I've edited your code. Instead of selecting an element by id, use this to get parentElement and toggle the class short.

Also if you want the list marked with bullet, use display:list-item. The list-item keyword causes the element to generate a ::marker pseudo-element box.

function reed(saad) {
  saad.parentElement.classList.toggle("short");
  if (saad.innerHTML == "Show More") {
    saad.innerHTML = "Show Less";
  } else {
    saad.innerHTML = "Show More";
  }
}

.Card1.short > li:nth-child(n + 6), .Card2.short > li:nth-child(n + 6) {
  display: list-item;
}

.Card1 > li:nth-child(n + 6), .Card2 > li:nth-child(n + 6) {
  display: none;
}

ul{
  float:left;
}

<ul class="Card1" id="Card1">
  <li>Windows 10</li>
  <li>8GB Ram</li>
  <li>1TB SSD</li>
  <li>Intel Core i7 (11th Gen)</li>
  <li>NVIDIA GeForce</li>
  <li>Full HD Display</li>
  <li>Dolby Audio</li>
  <li>1 Warranty</li>
  <button id="demo1" onclick="reed(this)">Show More</button>
</ul>


<ul class="Card2" id="Card2">
  <li>Windows 20</li>
  <li>16GB Ram</li>
  <li>10TB SSD</li>
  <li>Intel Core i15 (21th Gen)</li>
  <li>NVIDIA</li>
  <li>Double HD Display</li>
  <li>Dolby Audio</li>
  <li>2 Warranty</li>
  <button id="demo2" onclick="reed(this)">Show More</button>
</ul>