当点击li时，jquery隐藏或显示ul的动态li

Question

In php while loop i got this type of data and when i click on li which id="test1" then hide that li which id="test1" and show li which id="new_test1" i want to for particular ul means i click "li" then do process for that particular ul in which that li is present.

<ul id="cpvote">
<li id="test1">Message 1</span></li>
<li id="test2">Message 2</li>
<li id="test3">Message 3</li>
<li id="new_test1" style="display:none">Message 4</li>
<li id="new_test2" style="display:none">Message 5</li>
</ul>

<ul id="cpvote">
<li id="test1">Message 1</span></li>
<li id="test2">Message 2</li>
<li id="test3">Message 3</li>
<li id="new_test1" style="display:none">Message 4</li>
<li id="new_test2" style="display:none">Message 5</li>
</ul>

<ul id="cpvote">
<li id="test1">Message 1</span></li>
<li id="test2">Message 2</li>
<li id="test3">Message 3</li>

<li id="new_test1" style="display:none">Message 4</li>
<li id="new_test2" style="display:none">Message 5</li>
</ul>

Answer 1

IDs must be unique. However you can use a class multiple times.

Use class selector. Following is just an example to achieve desired result using class selector

HTML:

<ul class="cpvote">
    <li class="test1">Message 1</li>
    <li class="new_test1" style="display:none">Message 4</li>
</ul>
<ul class="cpvote">
    <li class="test1">Message 1</li>
    <li class="new_test1" style="display:none">Message 4</li>
</ul>
<ul class="cpvote">
    <li class="test1">Message 1</li>
    <li class="new_test1" style="display:none">Message 4</li>
</ul>

Script:

$(document).ready(function () {
    $(document).on('click', '.cpvote .test1', function () {
        $(this).closest('.cpvote').find('.new_test1').toggle();
    });
});

DEMO