Same Button Remove

I am trying to remove same button matching pairs using the code below but i am not not successful. As they are two button1 and button3 so if i click the matching pair button 1 and button 1 both should remove with score as 1. i.e., for every succesful pair score is incremented by 1.


<div id="score">Score: 0</div>
<button id="one" type="button" data-index="0">Button1</button>
<button id="two" type="button" data-index="0">Button1</button>
<button id="three" type="button" data-index="1">Button3</button>
<button id="four" type="button" data-index="1">Button3</button>

<script>

var Score = 0;
    index = 0;

$("#one, #two, #three, #four").click(function () {

    var dataIndex = $(this).data('index');
    if (index == dataIndex) {
        Score++;
        $(this).hide();
        if(dataIndex == 1) {
            index = 0;
        } else {
           index++;
        }
    }

    $("#score").html("Score: " + Score);
});
</script>


Hi,

I’m not sure I understood what you are trying to do, but do you mean something like this:

<div id="score">Score: 0</div>
<div id="buttons">
    <button data-index="0">Button1</button>
    <button data-index="2">Button3</button>
    <button data-index="1">Button2</button>
    <button data-index="3">Button4</button>
    <button data-index="2">Button3</button>
    <button data-index="1">Button2</button>
    <button data-index="3">Button4</button>
    <button data-index="0">Button1</button>
</div>
var score = 0;

$("button").on("click", function () {
    score++;
    var index = $(this).data("index");
    $("#buttons").find("[data-index='" + index + "']").remove();   
    $("#score ").html("Score: " + score);
});

demo