jquery – Can I hide only the Bootstrap Modal's content?

Is there a way to only hide the content of the modal, not the modal itself, so when I click next, it shows the content from the next modal, but it doesn’t reopen the next modal, but changes only to the content.
There’s a code of JQuery which creates the Modals accord to the amount of array elements in a text file and a function with which I try to change the Modal content with next/previous buttons

$("#Modals_"+index).each(function () {
    var currentModal = $(this);
    // Modal next
    currentModal.find('.btn-next').click(function () {
        currentModal.modal('hide');
        currentModal.closest("div[id^='Modals_']").nextAll("div[id^='Modals_']").first().modal('show');
    });
    //Modal previous
    currentModal.find('.btn-prev').click(function () {
        currentModal.modal('hide');
        currentModal.closest("div[id^='Modals_']").prevAll("div[id^='Modals_']").first().modal('show');
    });
});

"<pre><button class=\"btn modal-button\" data-toggle=\"modal\" id=\"buttonOn_" + index + "\" data-target=\"#Modals_" + index + "\" value=\"open Modal\"></button>\n" +
"     <h3 class=\"modal-title_" + index + "\"></h3>\n" +
"</pre>\n" +
"<div class=\"modal fade\" id=\"Modals_" + index + "\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"ModalCenterTitle\" aria-hidden=\"true\">\n" +
"   <div class=\"modal-dialog modal-lg modal-dialog-centered\">\n" +
"      <div class=\"modal-content\" id=\"modal-content_" + index + "\">\n" +
"         <div class=\"modal-body picture\" id=\"modal-body_" + index + "\">\n" +
"            <img class=\"img-responsive\" id=\"modalPic_" + index + "\" src=\"\" alt=\"...\">\n" +
"            <h2 id=\"modal-title_" + index + "\" class=\"modal-title_" + index + "\"></h2>\n" +
"            <p id=\"modal-description_" + index + "\" class=\"modal-description_" + index + "\"></p>\n" +
"            <button class=\"btn-prev\" id=\"previous_"+index+"\" onclick=\"\">Previous</button>\n" +
"            <button class=\"btn-next\" id=\"next_"+index+"\" onclick=\"\">Next</button>\n" +
"            <button type=\"button\" class=\"btn btn-default\" data-dismiss=\"modal\" style='color: white;'>Close</button>\n" +
"         </div>\n" +
"      </div>\n" +
"   </div>\n" +
"</div>\n");

Array
(
    [0] => Array
        (
            [nameLV] => Loku līnijas mezgls
            [descriptionLV] => Mezgls, kas izskatās pēc loka
            [nameEN] => Bowline knot
            [descriptionEN] => Angliski
            [nameRU] => Узел носовой линии
            [descriptionRU] => Krieviski
            [Image] => bowline.png
        )

    [1] => Array
        (
            [nameLV] => Astoņnieku mezgls
            [descriptionLV] => Mezgls 8 formā
            [nameEN] => Figure Eight knot
            [descriptionEN] => Angliski
            [nameRU] => Восьмерка узел
            [descriptionRU] => Krieviski
            [Image] => figureEight.png
        )

    [2] => Array
        (
            [nameLV] => Makšķernieku mezgls
            [descriptionLV] => Izmanto tikai un vienīgi copermaņi
            [nameEN] => Fishermans knot
            [descriptionEN] => Used only and just only by fishermen fisherweman gender neutral
            [nameRU] => Copermanskij uzel
            [descriptionRU] => Tolko copermanski nuzno etot uzel
            [Image] => FishermansStyle.png
        )

    [3] => Array
        (
            [nameLV] => Sakabes mezgls
            [descriptionLV] => Mezgls ko izmanto lai sakabinātu lietas
            [nameEN] => Bunt Line Hitch knot
            [descriptionEN] => Angliski
            [nameRU] => Узел сцепления
            [descriptionRU] => Krieviski
            [Image] => buntlineHitch.png
        )

)
LV
EN

That is the array which is returned in php when I call back the .txt file with Json encoded data.

var json = [{
	"title": "title1",
	"image": "image1",
	"description": "description1"
}, {
	"title": "title2",
	"image": "image2",
	"description": "description2"
}];

$(function() {
  $("#next-btn").on("click", function() {
      var currentId = $(document).find("#position").val();
      id = $("#"+currentId).next();
      nextId = id.data("json")
      btnId = id.attr("id");
      if(nextId!==undefined) {
        openModal(nextId, btnId);
      } else {
        alert("last");
      }
  });
  
  $("#prev-btn").on("click", function() {
      var currentId = $(document).find("#position").val();
      id = $("#"+currentId).prev();
      prevId = id.data("json");
      btnId = id.attr("id");
      if(prevId!==undefined) {
        openModal(prevId, btnId);
      } else {
        alert("first");
      }
  });
  
  $(".openmodal").on("click", function() {  
      openModal($(this).data("json"), $(this).attr('id'));
  });
});


function openModal(id, btnId) {
    var js = json[id];
    title = js.title;
    image = js.image;
    description = js.description;
    $("#position").val(btnId);
    $(".modal-title").html(title);
    $(".modal-body").html("image"+image+", description"+description);
    $("#myModal").modal('show');
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<div id="myModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
  <div class="modal-content">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">×</button>
		<h3 class="modal-title">Heading</h3>
	</div>
	<div class="modal-body">
		
	</div>
	<div class="modal-footer">
    <input type="text" name="current" value="" id="position" />
		<button id="prev-btn" class="btn btn-warning">Prev</button>
        <button id="next-btn" class="btn btn-primary">Next</button>
		<button class="btn btn-default" data-dismiss="modal">Close</button>
	</div>
   </div>
  </div>
</div>

<input type="button" id="btn1" name="modal-open" data-json=0 class="openmodal btn btn-success" value="Open Model1" />

<input type="button" id="btn2" name="modal-open" data-json=1 class="openmodal btn btn-success" value="Open Model2" />

Tags: jqueryjquery