JS mousedown won't work on appended text tags

With two texts in p tags, the thing I want to do is when one is clicked it moves a bit and then other text is deleted, but re added after first one is clicked again. The problem is that when tag is deleted and when it gets added back the mousedown function is not working at all. I have to mention that mousedown works normal on the text/tag that is first clicked when page loads and only that tag stays clicktable.

$(document).ready(function() {
    
    var upPoBool = false;
    
    //first part
    $('#firstPart').mousedown(function() {
        if(upPoBool == false){
            var firstPart = document.getElementById("firstPart");
            firstPart.classList.toggle("firstPartToggle");
            
            //delete second part
            $("#secondPart").remove();
            
            upPoBool = true;
            
        } else if(upPoBool == true){
            var firstPart = document.getElementById("firstPart");
            firstPart.classList.toggle("firstPartToggle");
            
            $('#firstPart:last').after('<p id="secondPart">Second part move NEW</p>');

            upPoBool = false;
        }

    });
    
    var upBaBool = false;
    
    //second part
    $('#secondPart').mousedown(function() {
        if(upBaBool == false){
            var secondPart = document.getElementById("secondPart");
            secondPart.classList.toggle("secondPartToggle");
            
            //delete first part
            $("#firstPart").remove();
            
            upBaBool = true;
            
        } else if(upBaBool == true){
            var secondPart = document.getElementById("secondPart");
            secondPart.classList.toggle("secondPartToggle");

            $('#secondPart:last').before('<p id="firstPart">First part move NEW</p>');
            
            upBaBool = false;
        }

    });
    
});

.firstPartToggle{
    margin-left: 5rem;
}

.secondPartToggle{
    margin-left: 5rem;
}


#firstPart{
    position: absolute;
    top: 2rem;
    
    z-index: 101;
}

#secondPart{
    position: absolute;
    top: 4rem;
    
    z-index: 100;
}

<html>
<head>
<meta charset="UTF-8">
<title>ClickTestFAQ</title>
<link rel="stylesheet" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
    <p>Something test:</p>
    <div id="testingDiv">
        <p id="firstPart">First part move</p>
        <p id="secondPart">Second part move</p>
    </div>
    
    <!--Scripts-->
    <script src="jquery.js"></script>
    
</body>
    
</html>

Tags are not cutting into one another, so z-index is not doing anything, I also tried to put them in separate div but the result was same.

Solution

If you remove an element from DOM, youre also remove the bound events (also your mousedown event). That means that you need to add this mousedown event again after you recreate your element.

Here is an solution for your exact problem:

$(document).ready(function() {
    let upPoBool = false;
    let upBaBool = false;

        const firstPartHandler = () => {
        if(upPoBool == false){
            var firstPart = document.getElementById("firstPart");
            firstPart.classList.toggle("firstPartToggle");
            
            //delete second part
            $("#secondPart").remove();
            
            upPoBool = true;
        } else if(upPoBool == true){
            var firstPart = document.getElementById("firstPart");
            firstPart.classList.toggle("firstPartToggle");
            
            $('#firstPart:last').after('<p id="secondPart">Second part move NEW</p>');
                    $('#secondPart').mousedown(secondPartHandler);

            upPoBool = false;
        }
    }

        const secondPartHandler = () => {
        if(upBaBool == false){
            var secondPart = document.getElementById("secondPart");
            secondPart.classList.toggle("secondPartToggle");
            
            //delete first part
            $("#firstPart").remove();
            
            upBaBool = true;
        } else if(upBaBool == true){
            var secondPart = document.getElementById("secondPart");
            secondPart.classList.toggle("secondPartToggle");

            $('#secondPart:last').before('<p id="firstPart">First part move NEW</p>');
                    $('#firstPart').mousedown(firstPartHandler);
            
            upBaBool = false;
        }
    }
    
    //first part
    $('#firstPart').mousedown(firstPartHandler);
    
    //second part
    $('#secondPart').mousedown(secondPartHandler);
});

.firstPartToggle{
    margin-left: 5rem;
}

.secondPartToggle{
    margin-left: 5rem;
}


#firstPart{
    position: absolute;
    top: 2rem;
    
    z-index: 101;
}

#secondPart{
    position: absolute;
    top: 4rem;
    
    z-index: 100;
}

<html>
<head>
<meta charset="UTF-8">
<title>ClickTestFAQ</title>
<link rel="stylesheet" href="style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
    <p>Something test:</p>
    <div id="testingDiv">
        <p id="firstPart">First part move</p>
        <p id="secondPart">Second part move</p>
    </div>
    
    <!--Scripts-->
    <script src="jquery.js"></script>
    
</body>
    
</html>

Another solution could be to hide the elements instead of removing them. Here is an example:

$(document).ready(function() {
    let activeItem = null
    
    $('#testingDiv p').mousedown(function() {
        if (!activeItem) {
            $('#testingDiv p').not(this).hide()
            $(this).addClass('active')
            activeItem = $(this)
        } else {
            $('#testingDiv p').show()
            $(this).removeClass('active')
            activeItem = null
        }
    });
});

.active {
    margin-left: 5rem;
}


#firstPart {
    position: absolute;
    top: 2rem;
    z-index: 101;
}

#secondPart {
    position: absolute;
    top: 4rem;
    z-index: 100;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ClickTestFAQ</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
      <p>Something test:</p>
      <div id="testingDiv">
          <p id="firstPart">First part move</p>
          <p id="secondPart">Second part move</p>
      </div>
  </body>
</html>