How can I target the code contained in a prism.js script?

What I'm trying to do:

I use prism.js to display blocks of code. The idea is to be able to also display the visual rendering of this code, in the same window.

What I managed to do:

<button class="flip">See the code</button>
<div class="result"></div>
<div class="code">
<pre class="language-markup"><code class="language-markup"><script class="script" type="text/plain">
....here is my html code...
</script></code></pre>
</div>

As I have many code blocks like this, I thought using each and click functions, something like this :

$('.flip').each(function(){
  $(this).on('click',function(){
    var code = $(this).next('.code').html();//get the html code from the html block
  var result = $(this).next('.result').text(code);// inject it in the result block
  $(this).next('.code,.result').toggleClass('hide');// toggle to show code or result..
  
})
})

But it does nothing. Even If I target the pre tag, code or script tag, using html(), val(), or text() it doesn't work..

Any help would be appreciated..

EDIT: thanks to Swati answer it works. If I want to do the opposite, i.e. first display the visual rendering and then click on the button, the corresponding code, it's possible too. Here is my test :

$(".code").hide();
$('.flip').each(function(){
    var code_block = $(this).nextAll('.code:first');
    var preview_div = $(this).next('.result');
    preview_div.html(code_block.find("code.language-markup").text());    //add your html in result div...
}) 

    $(".flip").click(function() {
        var code_block = $(this).nextAll('.code:first');
        var preview_div = $(this).next('.result');

   //run or show codes..block
    if ($(this).text().trim() == "See the code") {
        $(this).text('Run Code')
        // preview_div.html(code_block.find("code.language-markup").text());    //add your html in result div...
        preview_div.show();
        code_block.hide();
    } else {
        $(this).text('See the code')
        

        code_block.show();
        preview_div.hide();
    }


})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="
https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js
"></script>
<link href="
https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css
" rel="stylesheet">

</head>
<body>
<button class="flip">Run Code</button>
<div class="result"></div>
<div class="code">
  <pre class="language-markup">
  <code class="language-markup">
  <script class="script" type="text/plain">
  <img src="https://i.pinimg.com/originals/1f/65/30/1f65303066ef5e14cad11da3c6eeef0d.jpg" width="50px" height="50px">
  <ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
 </ul>
</script>
</code>
</pre>
</div>
<button class="flip">Run Code</button>
<div class="result">
</div>
<div class="code">
  <pre class="language-markup">
  <code class="language-markup">
   <script class="script" type="text/plain">
   <p>XYZ..something <input type="text"/></p>
   </script>
</code>
</pre>
</div>

Solution

You can get the code block and result div using nextAll('.code:first') and next('.result') and depending on the condition show or hide your code or result div.

Demo Code :

$(".result").hide()

$(".flip").click(function() {

  var code_block = $(this).nextAll('.code:first');
  var preview_div = $(this).next('.result');

   //run or show codes..block
  if ($(this).text().trim() == "Run Code") {
    $(this).text('See the code')
    preview_div.html(code_block.find("code.language-markup").text());    //add your html in result div...
    code_block.hide()
    preview_div.show()
  } else {
    $(this).text('Run Code')
    preview_div.hide()
    code_block.show()
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="
https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js
"></script>
<link href="
https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css
" rel="stylesheet">

<button class="flip">Run Code</button>
<div class="result"></div>
<div class="code">
  <pre class="language-markup">
  <code class="language-markup">
  <script class="script" type="text/plain">
  <img src="https://i.pinimg.com/originals/1f/65/30/1f65303066ef5e14cad11da3c6eeef0d.jpg" width="50px" height="50px">
  <ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
 </ul>
</script>
</code>
</pre>
</div>
<button class="flip">Run Code</button>
<div class="result">
</div>
<div class="code">
  <pre class="language-markup">
  <code class="language-markup">
   <script class="script" type="text/plain">
   <p>XYZ..something <input type="text"/></p>
   </script>
</code>
</pre>
</div>

Other way : You can have same html in your result div as well and whenever you click on the button just toggle divs.

$(".result").hide()

$(".flip").click(function() {

  var code_block = $(this).nextAll('.code:first');
  var preview_div = $(this).next('.result');

  if ($(this).text().trim() == "Run Code") {
    $(this).text('See the code')
    code_block.hide()
    preview_div.show()
  } else {
    $(this).text('Run Code')
    preview_div.hide()
    code_block.show()
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="
https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js
"></script>
<link href="
https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css
" rel="stylesheet">

<button class="flip">Run Code</button>
<div class="result"> <img src="https://i.pinimg.com/originals/1f/65/30/1f65303066ef5e14cad11da3c6eeef0d.jpg" width="50px" height="50px"></div>
<div class="code">
  <pre class="language-markup">
  <code class="language-markup">
  <script class="script" type="text/plain">
  <img src="https://i.pinimg.com/originals/1f/65/30/1f65303066ef5e14cad11da3c6eeef0d.jpg" width="50px" height="50px">
</script>
</code>
</pre>
</div>