How do I do a double Floating joystick? (Direction and movement (one for each))?

I'm making a mobile game and want 2 floating joysticks. One for each side of the screen and one for Direction of the player and one for the movement of the player. I've succeeded with movement so far but there's one catch. When I'm using the movement joystick and press at the right side of the screen the joystick pops over there. Here's the script:

public class Movement : MonoBehaviour {

 public Rigidbody2D rb;
 public FloatingJoystick FloatingJoystick;
 Vector2 movement;
 public float speed = 50f;
 public RectTransform back;
 public RectTransform mid;
 public Transform bugFix;
 public bool BugFix = false;
 public bool CurrentTouch;

 // Start is called before the first frame update
 void Start()
 {
     rb.gravityScale = 0f;
 }
 
 // Update is called once per frame
 void Update()
 {

     Touch touch = Input.GetTouch(0);
     if (Input.touchCount > 0)
     {
         if (touch.phase == TouchPhase.Began)
         {
             if (BugFix == false)
             {
                 Debug.Log("A Touch!");
                 bugFix.position = touch.position;
                 BugFix = true;
             }

         }
         if (touch.phase == TouchPhase.Ended)
         {
             BugFix = false;
         }



         if (bugFix.position.x < Screen.width / 2)
         {
             
             
                 movement.x = FloatingJoystick.Horizontal;
                 movement.y = FloatingJoystick.Vertical;
                 mid.gameObject.SetActive(true);


         }
         else
         {
             back.gameObject.SetActive(false);
             mid.gameObject.SetActive(false);
         }




     }
    

     


 }
     void FixedUpdate()
     {
         rb.MovePosition(rb.position + movement * speed * Time.deltaTime);
     }

}