[Jqueri} problema toggle e classi

[Meliupa]

Salve ragazzi ho due problemi, ho richiamato un file Json in HTML, fin qui tutto bene, in questo file ci sono immagini e testo, il testo viene inserito in un paragrafo all'interno di un div, le foto invece vengono caricate in un altro div.

I miei problemi sono:
Ho inserito una funzione Jqueri in modo che venga assegnata la classe esatta alle foto, funziona ma ha una ripetizione continua e blocca la visualizzazione.
Il primo problema credo si risolva col secondo.
Io devo inserire 4 file json all'interno di una stessa sezione, ma quando appare uno deve scomparire l'altro.

Vi aggiungo il codice commentato cos� potete capire meglio.

$("#one").click(function () {    
$.getJSON("data/one.json", function (obj, data) {
        $.each(obj, function (key, value) {
            $("#cont1 .txt").append("<p>" + value.name + "</p>");
            $("#cont1 .txt").append("<p>" + value.details + "</p>");
            $("#cont1 .txt").append("<p>" + value.age + "</p>");
            $("#cont1 .txt").append("<p>" + value.color + "</p>");
            for (var i = 0; i < value.images.length; i++) {
                $("#cont1 .pht").append("<img src=" + value.images [i] + ">");
            }
        });
//aggiunta delle clessi

    $("#section #coldx img").addClass(function(){
            return "photo_";
        });    
    });    
});
        
    
$("#two").click(function () {    
$.getJSON("data/two.json", function (obj, data) {
        $.each(obj, function (key, value) {
            $("#cont2 .txt").append("<p>" + value.name + "</p>");
            $("#cont2 .txt").append("<p>" + value.details + "</p>");
            $("#cont2 .txt").append("<p>" + value.age + "</p>");
            $("#cont2 .txt").append("<p>" + value.color + "</p>");
            for (var i = 0; i < value.images.length; i++) {
                $("#cont2 .pht").append("<img src=" + value.images [i] + ">");
            }
        });
    $("#section #coldx img").addClass(function(n){
            return "photo_" + n;
        });    
    });
});


$("#three").click(function () {    
$.getJSON("data/one.json", function (obj, data) {
        $.each(obj, function (key, value) {
            $("#cont3 .txt").append("<p>" + value.name + "</p>");
            $("#cont3 .txt").append("<p>" + value.details + "</p>");
            $("#cont3 .txt").append("<p>" + value.age + "</p>");
            $("#cont3 .txt").append("<p>" + value.color + "</p>");
            for (var i = 0; i < value.images.length; i++) {
                $("#cont3 .pht").append("<img src=" + value.images [i] + ">");
            }
        });
    $("#section #coldx img").addClass(function(){
            return "photo_";
        });    
    });    
});
        
    
$("#four").click(function () {    
$.getJSON("data/two.json", function (obj, data) {
        $.each(obj, function (key, value) {
            $("#cont4 .txt").append("<p>" + value.name + "</p>");
            $("#cont4 .txt").append("<p>" + value.details + "</p>");
            $("#cont4 .txt").append("<p>" + value.age + "</p>");
            $("#cont4 .txt").append("<p>" + value.color + "</p>");
            for (var i = 0; i < value.images.length; i++) {
                $("#cont4 .pht").append("<img src=" + value.images [i] + ">");
            }
        });
//aggiunta delle clessi
    $("#section #coldx img").addClass(function(n){
            return "photo_" + n;
        });    
    });
});

questo invece � il codice html

<div id="section">            
  <div id="colsx">              
    <ul>                      
     <li id="one">one</li>                   
    <li id="two">two</li>                  
    <li id="three">three</li>                     
    <li id="four">four</li>           
   </ul>           
  </div>   
 <div id="coldx">    
<div id="cont1">  
  <div class="txt"></div>  
  <div class="pht"></div>   
</div>   
<div id="cont2">    
   <div class="txt"></div>
    <div class="pht"></div>   
 </div>  
  <div id="cont3">    
<div class="txt"></div>  
  <div class="pht"></div>    
</div>   
 <div id="cont4"> 
   <div class="txt"></div> 
   <div class="pht"></div>  
  </div>   
 </div>
 </div>

ho inserito pi� div perch� pensavo che aggiungendo e rimuovendo le classi riuscissi a risolvere il problema della visualizzazione, ma in realt� l'importante � solo che sia che i paragrafi che le foto appaiano nella "coldx" e che la continua creazione di classi a ogni click si fermi.
spero di essere stato abbastanza chiaro, nel caso chiedete pure